ptech-tokens 0.4.0 → 0.5.0

package/README.md

@@ -39,7 +39,7 @@ The package exposes three CSS entry points:
 **Hosts that want to re-theme** without replacing the library should apply CSS custom property overrides on `:root` (or a more-specific selector) in a stylesheet that loads after the library injects:
 
 ```css
-/* host-overrides.css — loaded after ptechlibraryv2 remote */
+/* host-overrides.css — loaded after ptechlibraryv3 remote */
 :root {
   --color-ps-aqua: #00b8c7;
 }
@@ -68,7 +68,7 @@ For hosts that manage their own CSS pipeline (not MF injection), the supported l
 
 ```ts
 import "ptech-tokens/index.css";          // 1. token primitives (unlayered :root)
-import "ptechlibraryv2/dist/styles.css";  // 2. library recipes
+import "ptechlibraryv3/dist/styles.css";  // 2. library recipes
 import "./host-overrides.css";            // 3. host overrides — last wins
 ```
 
@@ -252,6 +252,12 @@ Classes defined in `foundation.css`:
 | `.ps-card-solid` | components | Canonical single-layer card: solid `--color-ps-surface`, token border, `--radius-2xl` (16px), soft `--shadow-ps-card` — no gradient, no glow. One bordered card per region; never nest cards |
 | `.ps-section-wrap` | components | Tinted `--color-ps-section` container (radius `--radius-2xl`, padding `--space-lg`) that groups cards/rows |
 | `.ps-row` | components | Borderless flat list/settings row: `--color-ps-row` fill, `--radius-lg` (8px), lightens to `--color-ps-row-hover` on hover/focus-within. Layout (flex, padding) stays with the consumer |
+| `.ps-field-label` | components | Compact uppercase field label using token typography and subtle text colour |
+| `.ps-control-shell` | components | Shared input/select/search shell with token surface, border, hover, focus, invalid, and disabled states |
+| `.ps-control-input` | components | Transparent inner input reset that inherits token text and placeholder colours |
+| `.ps-control-icon` | components | Accent-coloured decorative/control icon helper |
+| `.ps-control-action` | components | Compact icon action button helper with token hover and focus states |
+| `.ps-icon-well` | components | Token-tinted icon container for status and leading visual affordances |
 
 ### Adding or removing tokens
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ptech-tokens",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Design tokens + foundation utilities for ptech design system",
   "type": "module",
   "main": "./src/index.ts",

package/src/foundation.css

@@ -99,4 +99,102 @@
   .ps-row:focus-within {
     background-color: var(--color-ps-row-hover);
   }
+
+  /* ---------- Shared form/control recipes ----------
+     Framework-agnostic shell, icon, and action affordances for inputs,
+     selects, search fields, compact toolbar controls, and demo knobs. */
+  .ps-field-label {
+    color: var(--color-ps-text-subtle);
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    line-height: var(--line-height-xs);
+    text-transform: uppercase;
+  }
+
+  .ps-control-shell {
+    background-color: color-mix(in srgb, var(--color-ps-surface) 84%, var(--color-surface-sink));
+    border: 1px solid var(--color-ps-border);
+    border-radius: var(--radius-xl);
+    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-surface-sink) 52%, transparent);
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  .ps-control-shell:hover {
+    border-color: color-mix(in srgb, var(--color-ps-aqua) 22%, var(--color-ps-border-hover));
+  }
+
+  .ps-control-shell:focus-within {
+    border-color: var(--color-ps-aqua);
+    box-shadow:
+      inset 0 1px 2px color-mix(in srgb, var(--color-surface-sink) 48%, transparent),
+      0 0 0 3px color-mix(in srgb, var(--color-ps-aqua) 22%, transparent);
+  }
+
+  .ps-control-shell.is-invalid {
+    border-color: var(--color-ps-error);
+  }
+
+  .ps-control-shell.is-invalid:focus-within {
+    box-shadow:
+      inset 0 1px 2px color-mix(in srgb, var(--color-surface-sink) 48%, transparent),
+      0 0 0 3px color-mix(in srgb, var(--color-ps-error) 22%, transparent);
+  }
+
+  .ps-control-shell.is-disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-disabled);
+  }
+
+  .ps-control-input {
+    background: transparent;
+    border: 0;
+    color: var(--color-ps-text);
+    outline: none;
+    width: 100%;
+  }
+
+  .ps-control-input::placeholder {
+    color: var(--color-ps-text-subtle);
+  }
+
+  .ps-control-icon {
+    color: var(--color-ps-aqua);
+  }
+
+  .ps-control-action {
+    align-items: center;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-lg);
+    color: var(--color-ps-text-subtle);
+    display: inline-flex;
+    justify-content: center;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ps-control-action:hover {
+    background-color: var(--color-ps-row-hover);
+    color: var(--color-ps-aqua);
+  }
+
+  .ps-control-action:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring);
+  }
+
+  .ps-icon-well {
+    align-items: center;
+    background-color: color-mix(in srgb, var(--color-ps-aqua) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-ps-aqua) 24%, transparent);
+    border-radius: var(--radius-xl);
+    color: var(--color-ps-aqua);
+    display: inline-flex;
+    justify-content: center;
+  }
 }