@excom/valence 0.1.0

package/support/paper-vars.css

@@ -0,0 +1,203 @@
+/* ============================================================
+ * Theme: paper. Material Design (digital paper & ink).
+ * Only these tokens differ from `flat` and `basic`.
+ * ============================================================ */
+
+@define-mixin global-vars {
+  /* === Motion: Material's standard easing & durations === */
+  --v-transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --v-transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --v-transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --v-transition-duration-fast: 0.15s;
+  --v-transition-duration-standard: 0.25s;
+  --v-transition-duration-slow: 0.4s;
+
+  /* === Z-index scale === */
+  --v-z-base: 1;
+  --v-z-elevated: 10;
+  --v-z-overlay: 100;
+  --v-z-modal: 1000;
+  --v-z-toast: 10000;
+
+  /* === Typography === */
+  --v-font-family-base: "Roboto", "Helvetica Neue", Arial, sans-serif;
+  --v-font-family-heading: "Roboto", "Helvetica Neue", Arial, sans-serif;
+  --v-font-family-monospace:
+    "Roboto Mono", "Source Code Pro", Consolas, monospace;
+
+  --v-font-size-xs: 12px;
+  --v-font-size-sm: 14px;
+  --v-font-size-md: 16px;
+  --v-font-size-lg: 20px;
+  --v-font-size-xl: 24px;
+  --v-font-size-2xl: 34px;
+  --v-font-size-3xl: 48px;
+
+  --v-font-weight-normal: 400;
+  --v-font-weight-medium: 500;
+  --v-font-weight-bold: 700;
+  --v-font-weight-heavy: 900;
+
+  --v-line-height-tight: 1.25;
+  --v-line-height-base: 1.5;
+  --v-line-height-loose: 1.75;
+
+  /* === Spacing: 8px grid (Material spec) === */
+  --v-space-xs: 4px;
+  --v-space-sm: 8px;
+  --v-space-md: 16px;
+  --v-space-lg: 24px;
+  --v-space-xl: 32px;
+  --v-space-2xl: 48px;
+  --v-space-3xl: 64px;
+
+  /* === Radii: Material's small radius === */
+  --v-radius-sm: 4px;
+  --v-radius-md: 8px;
+  --v-radius-lg: 16px;
+  --v-radius-pill: 99999px;
+
+  /* === Borders === */
+  --v-border-width-0: 1px;
+  --v-border-width-1: 2px;
+}
+
+@define-mixin global-vars-light {
+  /* Surfaces */
+  --v-background-0: #ffffff;
+  --v-background-1: #fafafa;
+  --v-background-2: #f5f5f5;
+
+  --v-stroke-0: #e0e0e0;
+  --v-stroke-1: #bdbdbd;
+
+  --v-overlay-0: rgba(0, 0, 0, 0.32);
+
+  --v-multiply-color-0: rgba(0, 0, 0, 0.02);
+  --v-multiply-color-1: rgba(0, 0, 0, 0.04);
+
+  /* Foreground */
+  --v-color-0: #212121;
+  --v-color-1: #424242;
+  --v-color-2: #757575;
+
+  --v-disabled-0: #e0e0e0;
+
+  /* Brand & semantic: Material palette */
+  --v-cta-0: #6200ee;
+  --v-cta-1: #ede7f6;
+
+  --v-red-0: #f44336;
+  --v-green-0: #4caf50;
+  --v-blue-0: #2196f3;
+  --v-yellow-0: #ffeb3b;
+  --v-orange-0: #ff9800;
+  --v-purple-0: #9c27b0;
+  --v-pink-0: #e91e63;
+  --v-brown-0: #795548;
+
+  /* Shadows: Material elevation (1dp, 2dp, 4dp, 16dp) */
+  --v-shadow-0:
+    0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
+    0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  --v-shadow-1:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
+    0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  --v-shadow-2:
+    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --v-shadow-elevated:
+    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
+    0 8px 10px -5px rgba(0, 0, 0, 0.2);
+
+  /* Interaction */
+  --v-scale-active-0: scale(0.98);
+  --v-scale-active-1: scale(0.96);
+  --v-filter-brightness-0: brightness(0.92);
+  --v-filter-brightness-1: brightness(0.85);
+}
+
+@define-mixin global-vars-dark {
+  /* Surfaces: Material dark uses elevated greys, not black */
+  --v-background-0: #121212;
+  --v-background-1: #1e1e1e;
+  --v-background-2: #232323;
+
+  --v-stroke-0: #383838;
+  --v-stroke-1: #5e5e5e;
+
+  --v-overlay-0: rgba(0, 0, 0, 0.6);
+
+  --v-multiply-color-0: rgba(255, 255, 255, 0.02);
+  --v-multiply-color-1: rgba(255, 255, 255, 0.04);
+
+  /* Foreground */
+  --v-color-0: #ffffff;
+  --v-color-1: #e0e0e0;
+  --v-color-2: #9e9e9e;
+
+  --v-disabled-0: #424242;
+
+  /* Brand & semantic: Material dark palette */
+  --v-cta-0: #bb86fc;
+  --v-cta-1: #382b50;
+
+  --v-red-0: #cf6679;
+  --v-green-0: #66bb6a;
+  --v-blue-0: #42a5f5;
+  --v-yellow-0: #fff176;
+  --v-orange-0: #ffa726;
+  --v-purple-0: #ba68c8;
+  --v-pink-0: #f06292;
+  --v-brown-0: #8d6e63;
+
+  /* Shadows: Material elevation in dark, slightly punchier */
+  --v-shadow-0:
+    0 1px 1px 0 rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3),
+    0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  --v-shadow-1:
+    0 2px 2px 0 rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.3),
+    0 1px 5px 0 rgba(0, 0, 0, 0.4);
+  --v-shadow-2:
+    0 4px 5px 0 rgba(0, 0, 0, 0.4), 0 1px 10px 0 rgba(0, 0, 0, 0.3),
+    0 2px 4px -1px rgba(0, 0, 0, 0.4);
+  --v-shadow-elevated:
+    0 16px 24px 2px rgba(0, 0, 0, 0.4), 0 6px 30px 5px rgba(0, 0, 0, 0.3),
+    0 8px 10px -5px rgba(0, 0, 0, 0.4);
+
+  /* Interaction */
+  --v-filter-brightness-0: brightness(0.85);
+  --v-filter-brightness-1: brightness(0.75);
+}
+
+@define-mixin global-vars-breakpoints {
+  @media (hover: none) {
+    :root {
+      --v-scale-active-0: scale(0.97);
+      --v-scale-active-1: scale(0.94);
+    }
+  }
+  @media (hover: hover) {
+    :root {
+      --v-scale-active-0: scale(0.98);
+      --v-scale-active-1: scale(0.96);
+    }
+  }
+}
+
+:root {
+  @mixin global-vars;
+  &:not([data-palette="dark"]) {
+    @mixin global-vars-light;
+  }
+  &[data-palette="dark"] {
+    @mixin global-vars-dark;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-palette="light"]) {
+    @mixin global-vars-dark;
+  }
+}
+
+@mixin global-vars-breakpoints;

package/support/paper.css

@@ -0,0 +1,4 @@
+@import "./reset.css";
+@import "./src/mixins.paper.css";
+@import "./paper-vars.css";
+@import "./src/components.css";