@dendelion/func-ui 0.2.2 → 0.3.0

package/dist/types/lamp.d.ts

@@ -0,0 +1,3 @@
+export type LampTone = 'green' | 'yellow' | 'gray' | 'red' | 'dark';
+export type LampSize = 'sm' | 'md' | 'lg';
+//# sourceMappingURL=lamp.d.ts.map

package/dist/types/lamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lamp.d.ts","sourceRoot":"","sources":["../../src/types/lamp.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dendelion/func-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Glossy, noisy, cosy React component library — frosted glass, film grain, and lava glow",
   "type": "module",
   "sideEffects": [

package/src/globals.scss

@@ -92,6 +92,22 @@
   --fui-status-warning-text: #a66a1f;
   --fui-status-error-fill: rgba(214, 86, 86, 0.16);
   --fui-status-error-text: #b03a3a;
+
+  --fui-lamp-green: radial-gradient(circle at 50% 50%, #47f57d 7%, #6fce8c 74%);
+  --fui-lamp-green-glow: rgba(71, 245, 125, 0.5);
+  --fui-lamp-green-glow-strong: rgba(43, 165, 121, 0.7);
+  --fui-lamp-yellow: radial-gradient(circle at 50% 50%, #ffbd30 21%, #bea571 79%);
+  --fui-lamp-yellow-glow: rgba(254, 182, 28, 0.5);
+  --fui-lamp-yellow-glow-strong: rgba(191, 123, 10, 0.7);
+  --fui-lamp-gray: linear-gradient(180deg, #f2f2f2 0%, #bbae90 100%);
+  --fui-lamp-gray-glow: rgba(187, 174, 144, 0.5);
+  --fui-lamp-gray-glow-strong: rgba(130, 118, 92, 0.7);
+  --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-glow: transparent;
+  --fui-lamp-dark-glow-strong: transparent;
 }
 
 .dark {
@@ -113,6 +129,15 @@
   --fui-status-warning-text: #ecc487;
   --fui-status-error-fill: rgba(226, 106, 106, 0.18);
   --fui-status-error-text: #eda1a1;
+
+  --fui-lamp-green-glow: rgba(71, 245, 125, 0.4);
+  --fui-lamp-green-glow-strong: rgba(71, 245, 125, 0.6);
+  --fui-lamp-yellow-glow: rgba(254, 182, 28, 0.4);
+  --fui-lamp-yellow-glow-strong: rgba(254, 182, 28, 0.6);
+  --fui-lamp-gray-glow: rgba(242, 242, 242, 0.4);
+  --fui-lamp-gray-glow-strong: rgba(242, 242, 242, 0.6);
+  --fui-lamp-red-glow: rgba(255, 80, 80, 0.4);
+  --fui-lamp-red-glow-strong: rgba(255, 80, 80, 0.6);
 }
 
 // ─── Base ──────────────────────────────────────────────────────

package/src/styles/_lamp.scss

@@ -0,0 +1,118 @@
+@use 'sass:map';
+
+$lamp-sizes: (
+  sm: (
+    height: 36px,
+    inset: 3.5px,
+    padding: 0 20px,
+    radius: 18px,
+  ),
+  md: (
+    height: 48px,
+    inset: 4.5px,
+    padding: 0 20px,
+    radius: 24px,
+  ),
+  lg: (
+    height: 56px,
+    inset: 5.8px,
+    padding: 0 24px,
+    radius: 28px,
+  ),
+);
+
+@function lamp-size($size, $key) {
+  @return map.get($lamp-sizes, $size, $key);
+}
+
+$lamp-radius-full: 9999px;
+$lamp-radius-xl: 24px;
+
+$lamp-bezel-gradient: linear-gradient(
+  135deg,
+  #6e6e6e 0%,
+  #41403d 24%,
+  #373633 50%,
+  #1f1f1d 80%,
+  #1f1f1d 100%
+);
+$lamp-bezel-gradient-wide: linear-gradient(
+  135deg,
+  #6e6e6e 0%,
+  #41403d 24%,
+  #494947 50%,
+  #363636 80%,
+  #363636 100%
+);
+$lamp-bezel-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+$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;
+$lamp-socket-shadow:
+  1px 1px 2px rgba(0, 0, 0, 0.2),
+  3px 3px 2px rgba(0, 0, 0, 0.05),
+  2px 2px 8px rgba(0, 0, 0, 0.2);
+
+$lamp-frosted-shadow:
+  inset 5px 2px 5px 2px rgba(0, 0, 0, 0.2),
+  inset -1px 3px 6px 1px rgba(255, 255, 255, 0.6);
+$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);
+
+$lamp-transition: all 200ms ease-out;
+
+@mixin lamp-bezel {
+  position: absolute;
+  inset: 0;
+  border-radius: $lamp-radius-full;
+  background: $lamp-bezel-gradient;
+  box-shadow: $lamp-bezel-shadow;
+}
+
+@mixin lamp-bezel-soft {
+  position: absolute;
+  inset: 0;
+  background: $lamp-bezel-gradient-wide;
+  box-shadow: $lamp-bezel-soft-shadow;
+}
+
+@mixin lamp-socket($inset: lamp-size(lg, inset)) {
+  position: absolute;
+  inset: $inset;
+  border-radius: $lamp-radius-full;
+  background-color: $lamp-socket-color;
+  box-shadow: $lamp-socket-shadow;
+}
+
+@mixin lamp-surface($inset: lamp-size(lg, inset)) {
+  position: absolute;
+  inset: $inset;
+  border-radius: $lamp-radius-xl;
+  transition: $lamp-transition;
+}
+
+@mixin lamp-frosted-inner($subtle: false) {
+  @if $subtle {
+    box-shadow: $lamp-frosted-shadow-subtle;
+  } @else {
+    box-shadow: $lamp-frosted-shadow;
+  }
+}
+
+@mixin lamp-tone($tone) {
+  background: var(--fui-lamp-#{$tone});
+}
+
+@mixin lamp-glow($tone) {
+  @include lamp-frosted-inner;
+
+  &:hover {
+    box-shadow:
+      $lamp-frosted-shadow,
+      0 0 10px 2px var(--fui-lamp-#{$tone}-glow),
+      0 0 20px 0 var(--fui-lamp-#{$tone}-glow-strong);
+  }
+}