@decantr/css 1.0.0 → 1.0.2

package/README.md

@@ -119,6 +119,7 @@ Mobile-first breakpoints: `_sm:` (640px), `_md:` (768px), `_lg:` (1024px), `_xl:
 When you scaffold a project with `@decantr/cli`, it generates:
 
 - `src/styles/tokens.css` - Theme tokens (colors, spacing, radii)
+- `src/styles/treatments.css` - Visual treatment classes (interactive, surface, data, control, section, annotation)
 - `src/styles/decorators.css` - Recipe decorator classes
 
 Import these alongside @decantr/css:
@@ -126,6 +127,7 @@ Import these alongside @decantr/css:
 ```js
 import { css } from '@decantr/css';
 import './styles/tokens.css';
+import './styles/treatments.css';
 import './styles/decorators.css';
 ```
 

package/dist/index.d.ts

@@ -75,9 +75,9 @@ declare function injectMediaQuery(className: string, declaration: string, query:
  */
 declare function extractCSS(): string;
 /**
- * Get set of injected class names.
+ * Get array of injected class names.
  */
-declare function getInjectedClasses(): Set<string>;
+declare function getInjectedClasses(): string[];
 /**
  * Reset all injected styles (for testing).
  */
@@ -94,4 +94,9 @@ declare function reset(): void;
  */
 declare function resolveAtomDecl(atom: string): string | null;
 
-export { BREAKPOINTS, CQ_WIDTHS, css, define, extractCSS, getInjectedClasses, inject, injectContainer, injectGroupPeer, injectMediaQuery, injectPseudo, injectResponsive, reset, resolveAtomDecl };
+declare function getAnimations(): boolean;
+declare function setAnimations(v: boolean): void;
+declare function getTheme(): string | null;
+declare function setTheme(id: string | null): void;
+
+export { BREAKPOINTS, CQ_WIDTHS, css, define, extractCSS, getAnimations, getInjectedClasses, getTheme, inject, injectContainer, injectGroupPeer, injectMediaQuery, injectPseudo, injectResponsive, reset, resolveAtomDecl, setAnimations, setTheme };

package/dist/index.js

@@ -77,6 +77,8 @@ var DIRECT = {
   minh0: "min-height:0",
   maxwfull: "max-width:100%",
   maxhfull: "max-height:100%",
+  mw640: "max-width:40rem",
+  mw480: "max-width:30rem",
   // Overflow
   overhidden: "overflow:hidden",
   overauto: "overflow:auto",
@@ -104,6 +106,8 @@ var DIRECT = {
   fontsemi: "font-weight:600",
   fontbold: "font-weight:700",
   fontextrabold: "font-weight:800",
+  // Font family
+  fontmono: "font-family:var(--d-font-mono,ui-monospace,monospace)",
   // Font style
   italic: "font-style:italic",
   notitalic: "font-style:normal",
@@ -232,8 +236,15 @@ var DIRECT = {
   ring: "outline:2px solid var(--d-primary,#6366f1);outline-offset:2px",
   ring1: "outline:1px solid var(--d-primary,#6366f1);outline-offset:1px",
   ring2: "outline:2px solid var(--d-primary,#6366f1);outline-offset:2px",
-  // Container
-  container: "container-type:inline-size",
+  // Container queries
+  cqinline: "container-type:inline-size",
+  // Container (max-width containment)
+  container: "max-width:1200px;margin-inline:auto;width:100%;padding-inline:1rem",
+  containersm: "max-width:640px;margin-inline:auto;width:100%;padding-inline:1rem",
+  containermd: "max-width:768px;margin-inline:auto;width:100%;padding-inline:1rem",
+  containerlg: "max-width:1024px;margin-inline:auto;width:100%;padding-inline:1rem",
+  containerxl: "max-width:1400px;margin-inline:auto;width:100%;padding-inline:1rem",
+  containerfull: "max-width:100%;margin-inline:auto;width:100%;padding-inline:1rem",
   // Background
   bgcover: "background-size:cover",
   bgcontain: "background-size:contain",
@@ -334,6 +345,8 @@ var COLOR_ATOMS = {
   bgsurface0: "background:var(--d-surface-0,var(--d-bg))",
   bgsurface1: "background:var(--d-surface-1,var(--d-surface))",
   bgsurface2: "background:var(--d-surface-2,var(--d-surface-raised))",
+  bgsurf: "background:var(--d-surface)",
+  bgsurfraised: "background:var(--d-surface-raised)",
   bgmuted: "background:var(--d-muted,var(--d-surface))",
   bgbg: "background:var(--d-bg)",
   bgtransparent: "background:transparent",
@@ -753,7 +766,7 @@ function extractCSS() {
   return css2;
 }
 function getInjectedClasses() {
-  return new Set(injected);
+  return [...injected];
 }
 function reset() {
   injected.clear();
@@ -996,13 +1009,31 @@ function css(...classes) {
 function define(name, declaration) {
   customAtoms.set(name, declaration);
 }
+
+// src/index.ts
+var _animations = true;
+function getAnimations() {
+  return _animations;
+}
+function setAnimations(v) {
+  _animations = v;
+}
+var _themeId = null;
+function getTheme() {
+  return _themeId;
+}
+function setTheme(id) {
+  _themeId = id;
+}
 export {
   BREAKPOINTS,
   CQ_WIDTHS,
   css,
   define,
   extractCSS,
+  getAnimations,
   getInjectedClasses,
+  getTheme,
   inject,
   injectContainer,
   injectGroupPeer,
@@ -1010,5 +1041,7 @@ export {
   injectPseudo,
   injectResponsive,
   reset,
-  resolveAtomDecl
+  resolveAtomDecl,
+  setAnimations,
+  setTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decantr/css",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Framework-agnostic CSS atoms runtime for Decantr projects",
   "author": "Decantr",
   "repository": {