@dendelion/func-ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dendelion/func-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Glossy, noisy, cosy React component library — frosted glass, film grain, and lava glow",
   "type": "module",
   "sideEffects": [
@@ -78,11 +78,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
     "gsap": "^3.15.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
     "postcss-scss": "^4.0.9",
     "publint": "^0.3.21",

package/src/globals.scss

@@ -105,7 +105,11 @@
   --fui-lamp-red: radial-gradient(circle at 50% 50%, #ff5050 39%, #f99696 100%);
   --fui-lamp-red-glow: rgba(255, 80, 80, 0.5);
   --fui-lamp-red-glow-strong: rgba(192, 79, 79, 0.7);
-  --fui-lamp-dark: radial-gradient(circle at 50% 50%, #61675f 0%, #36302b 100%);
+  --fui-lamp-dark: radial-gradient(
+    circle at 50% 30%,
+    rgba(70, 66, 60, 0.45) 0%,
+    rgba(14, 12, 10, 0.7) 100%
+  );
   --fui-lamp-dark-glow: transparent;
   --fui-lamp-dark-glow-strong: transparent;
 }
@@ -139,20 +143,3 @@
   --fui-lamp-red-glow: rgba(255, 80, 80, 0.4);
   --fui-lamp-red-glow-strong: rgba(255, 80, 80, 0.6);
 }
-
-// ─── Base ──────────────────────────────────────────────────────
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: $font-family-sans;
-  line-height: 1.6;
-  background-color: var(--fui-bg);
-  color: var(--fui-text);
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-}

package/src/styles/_lamp.scss

@@ -49,7 +49,9 @@ $lamp-bezel-soft-shadow:
   0 4px 8px -2px rgba(0, 0, 0, 0.3),
   0 2px 4px -1px rgba(0, 0, 0, 0.2);
 
-$lamp-socket-color: #1a1a1a;
+// Translucent so the unlit (dark) tone reads as smoked glass over whatever
+// is behind the lamp; the lit tones are opaque and cover it entirely.
+$lamp-socket-color: rgba(10, 9, 8, 0.45);
 $lamp-socket-shadow:
   1px 1px 2px rgba(0, 0, 0, 0.2),
   3px 3px 2px rgba(0, 0, 0, 0.05),
@@ -61,6 +63,11 @@ $lamp-frosted-shadow:
 $lamp-frosted-shadow-subtle:
   inset 5px 2px 5px 2px rgba(0, 0, 0, 0.1),
   inset -1px 3px 6px 1px rgba(255, 255, 255, 0.2);
+// The unlit lamp: smoked glass with a thin rim of light on top, not the
+// lit tones' milky frost.
+$lamp-smoked-shadow:
+  inset 0 1px 1px rgba(255, 255, 255, 0.14),
+  inset 0 -3px 6px rgba(0, 0, 0, 0.45);
 
 $lamp-transition: all 200ms ease-out;
 
@@ -94,8 +101,10 @@ $lamp-transition: all 200ms ease-out;
   transition: $lamp-transition;
 }
 
-@mixin lamp-frosted-inner($subtle: false) {
-  @if $subtle {
+@mixin lamp-frosted-inner($subtle: false, $tone: null) {
+  @if $tone == 'dark' {
+    box-shadow: $lamp-smoked-shadow;
+  } @else if $subtle {
     box-shadow: $lamp-frosted-shadow-subtle;
   } @else {
     box-shadow: $lamp-frosted-shadow;
@@ -107,11 +116,11 @@ $lamp-transition: all 200ms ease-out;
 }
 
 @mixin lamp-glow($tone) {
-  @include lamp-frosted-inner;
+  @include lamp-frosted-inner($tone: $tone);
 
   &:hover {
     box-shadow:
-      $lamp-frosted-shadow,
+      if($tone == 'dark', $lamp-smoked-shadow, $lamp-frosted-shadow),
       0 0 10px 2px var(--fui-lamp-#{$tone}-glow),
       0 0 20px 0 var(--fui-lamp-#{$tone}-glow-strong);
   }

package/src/styles/_tokens.scss

@@ -29,9 +29,9 @@ $space-6: 1.5rem;
 $space-8: 2rem;
 
 // ─── Type scale ────────────────────────────────────────────────
-$font-family-sans: 'Montserrat Alternates', sans-serif;
+$font-family-sans: var(--fui-font, 'Montserrat Alternates', sans-serif);
 $font-family-title: 'KyivType Serif', Georgia, serif;
-$font-family-mono: 'Montserrat Alternates', sans-serif;
+$font-family-mono: var(--fui-font, 'Montserrat Alternates', sans-serif);
 
 $font-size-sm: 0.875rem;
 $font-size-md: 1rem;