@kungal/ui-tokens 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @kungal/ui-tokens
 
+## 1.8.1
+
+### Patch Changes
+
+- c2f4bda: feat(tokens): add `--kun-surface-opacity` for themeable surface transparency (glass)
+
+  The raised surface (`content1` — cards, popovers, dropdowns, inputs, modal,
+  drawer) now resolves its alpha through `--kun-surface-opacity`, default `1`
+  (fully opaque, no visual change). A site with a background image (e.g. a galgame
+  page) can make every surface see-through at once, with no component changes:
+
+  ```css
+  :root {
+    --kun-surface-opacity: 0.7;
+    --kun-background-blur: 12px;
+  }
+  ```
+
+  Components don't ship a `backdrop-blur` on every surface, so set
+  `--kun-background-blur` too if you want true frosted glass rather than plain
+  translucency. Default sites are unaffected.
+
+## 1.8.0
+
+### Minor Changes
+
+- 3e821c4: feat(tokens,vue): surface-elevation system — cards & inputs pop by fill+shadow, not borders
+
+  Move from a border-defined look to an elevation scale. The page background is now
+  a soft neutral (light `#f5f5f7`, dark near-black `#0a0a0a`) instead of pure
+  white/black, so raised surfaces read as raised:
+
+  - **Card** is a raised surface — `bg-content1` (`#fff` / `#18181b`) + `shadow-kun-sm`;
+    border is now OFF by default (`bordered` is opt-in). It no longer shares the
+    page background.
+  - **Inputs are borderless and share the card surface**: Input, Textarea, Select,
+    NumberInput, TagInput, PinInput, Autocomplete, DatePicker trigger and the
+    Pagination field use `bg-content1` + `shadow-kun-sm` (same fill as a card, lifted
+    by a small shadow). The error state is a danger **ring**, not a border.
+  - **Floating panels lose their border** and rely on shadow + the `content1`
+    surface: Dropdown, Select/Autocomplete lists, ContextMenu, Popover, Tooltip,
+    DatePicker calendar, Modal, Drawer.
+  - **Placeholder** now uses a theme-adaptive `::placeholder` colour (the browser
+    default grey didn't follow light/dark).
+
+  Visual change only; component APIs are unchanged except `KunCard`'s `bordered`
+  default (true→false) and `KunTagInput`'s `variant` default (bordered→flat).
+
 ## 1.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/ui-tokens",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "KunUI design tokens — framework-agnostic Tailwind v4 theme (semantic colors, radius, z-index, animations).",
   "type": "module",
   "keywords": [

package/src/base.css

@@ -42,6 +42,14 @@
     color: oklch(var(--foreground));
     min-height: 100vh;
   }
+
+  /* Placeholder text — a muted neutral that flips with the theme (the browser
+   * default is a fixed grey that doesn't follow light/dark). `opacity: 1` since
+   * the colour already carries its own muting and UA sheets dim placeholders. */
+  ::placeholder {
+    color: oklch(var(--default-400));
+    opacity: 1;
+  }
 }
 
 @layer utilities {

package/src/palette.generated.css

@@ -11,7 +11,7 @@
 @theme {
   --color-background: oklch(var(--background) / var(--kun-global-opacity));
   --color-foreground: oklch(var(--foreground));
-  --color-content1: oklch(var(--content1));
+  --color-content1: oklch(var(--content1) / var(--kun-surface-opacity));
   --color-content2: oklch(var(--content2));
   --color-content3: oklch(var(--content3));
   --color-content4: oklch(var(--content4));
@@ -117,7 +117,7 @@
 
 @layer base {
   :root {
-    --background: 1 0 0;
+    --background: 0.9707 0.0027 286.35;
     --foreground: 0.2057 0.0132 233.66;
     --content1: 1 0 0;
     --content2: 0.9683 0.0014 286.37;
@@ -231,7 +231,7 @@
   }
 
   .kun-dark-mode {
-    --background: 0 0 0;
+    --background: 0.1448 0 0;
     --foreground: 0.946 0.0018 247.84;
     --content1: 0.2102 0.006 285.87;
     --content2: 0.2747 0.006 286;

package/src/tokens.css

@@ -31,6 +31,15 @@
    * default-100). Lower = more see-through. Apps may override in :root. */
   --kun-global-opacity: 0.7;
 
+  /* Opacity of the RAISED surface (`content1`) — cards, popovers, dropdowns,
+   * inputs, modal, drawer. Default 1 = fully opaque (the clean elevation look).
+   * A site with a background image (e.g. a galgame page) can make every surface
+   * frosted at once by lowering this and adding a blur, with NO component changes:
+   *   :root { --kun-surface-opacity: 0.7; --kun-background-blur: 12px; }
+   * (Components don't ship a backdrop-blur on every surface, so set the blur too
+   * if you want true frosted glass rather than plain see-through.) */
+  --kun-surface-opacity: 1;
+
   /* Backdrop blur strength for glass surfaces (Card / Modal / sticky
    * topbar). 0 = no blur. Referenced as
    * `backdrop-blur-[var(--kun-background-blur)]` by those components.