@snhaman/pollymorph 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,121 @@
1
+ # @snhaman/pollymorph
2
+
3
+ Elucidata unified design system — design tokens, usage rules, TypeScript types, and CSS custom properties. Built from PollyMorph v1.4.0.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @snhaman/pollymorph
9
+ # or
10
+ yarn add @snhaman/pollymorph
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### Full JSON (default export)
16
+
17
+ ```ts
18
+ import pollymorph from "@snhaman/pollymorph";
19
+
20
+ console.log(pollymorph.meta.version); // "1.4.0"
21
+ console.log(pollymorph.core.color.primary.purple.base); // "#8E42EE"
22
+ console.log(pollymorph.rules.color.brand.primary_purple);
23
+ ```
24
+
25
+ ### Flat token exports
26
+
27
+ ```ts
28
+ import { colorPurple, colorOrange, fontFamilyInter, fontWeightSemibold, spacingFour } from "@snhaman/pollymorph/tokens";
29
+
30
+ // Use directly in styles
31
+ const styles = {
32
+ color: colorPurple, // "#8E42EE"
33
+ fontFamily: fontFamilyInter, // "Inter, sans-serif"
34
+ fontWeight: fontWeightSemibold, // 600
35
+ padding: spacingFour, // "1rem"
36
+ };
37
+ ```
38
+
39
+ ### Rules exports
40
+
41
+ ```ts
42
+ import { rules, rulePrimaryPurple, ruleStatusRed, ruleSidebarBg } from "@snhaman/pollymorph/rules";
43
+
44
+ // Lint or validate design decisions programmatically
45
+ console.log(rulePrimaryPurple);
46
+ // "Brand purple (#8E42EE) is the primary interactive color. Use for: primary buttons..."
47
+
48
+ console.log(ruleStatusRed);
49
+ // "Use for high-alert, error, and destructive states only."
50
+ ```
51
+
52
+ ### CSS custom properties
53
+
54
+ Import the stylesheet to get all tokens as CSS variables on `:root`:
55
+
56
+ ```ts
57
+ // In your app entry point
58
+ import "@snhaman/pollymorph/css";
59
+ ```
60
+
61
+ ```css
62
+ /* Then use in any CSS/SCSS */
63
+ .button-primary {
64
+ background: var(--color-primary-purple);
65
+ font-family: var(--font-family-inter);
66
+ padding: var(--spacing-2) var(--spacing-4);
67
+ border-radius: var(--radius-md);
68
+ box-shadow: var(--elevation-md);
69
+ }
70
+
71
+ .sidebar {
72
+ background: var(--color-sidebar-bg); /* #211D33 */
73
+ border-right: 1px solid var(--color-sidebar-stroke); /* #433B60 */
74
+ }
75
+
76
+ .platform-surface {
77
+ background: var(--color-platform-surface); /* the 3-stop gradient */
78
+ }
79
+ ```
80
+
81
+ ### TypeScript autocomplete
82
+
83
+ All exports are fully typed. Import types directly if needed:
84
+
85
+ ```ts
86
+ import type { PollyMorph, ColorTokens, PollyMorphRules } from "@snhaman/pollymorph";
87
+ ```
88
+
89
+ ## What's in the package
90
+
91
+ | Export | Contents |
92
+ |---|---|
93
+ | `@snhaman/pollymorph` | Full PollyMorph JSON — tokens + rules, typed |
94
+ | `@snhaman/pollymorph/tokens` | Flat convenience exports for all token values |
95
+ | `@snhaman/pollymorph/rules` | Flat exports for all design usage rules |
96
+ | `@snhaman/pollymorph/css` | 574-line CSS file with all tokens as `--custom-properties` on `:root` |
97
+
98
+ ## Token structure
99
+
100
+ ```
101
+ core.color.primary.purple.base → #8E42EE
102
+ core.color.primary.purple[80] → tint (80% mixed with white)
103
+ core.color.primary.purple[-20] → shade (20% mixed with black)
104
+ core.font.family.inter → "Inter, sans-serif"
105
+ core.font.weight.semibold → 600
106
+ core.spacing[4] → "1rem"
107
+ core.radius.xl → "1rem"
108
+ core.elevation.md.shadow → box-shadow value
109
+ semantic.button.* → button component tokens
110
+ semantic.card.* → card component tokens
111
+ rules.color.brand.* → color usage rules
112
+ rules.typography.* → typography usage rules
113
+ rules.layout.* → layout rules
114
+ rules.components.* → component rules
115
+ ```
116
+
117
+ ## Version
118
+
119
+ `1.4.0` — Includes full 22-step color ramp for all 21 colors, platform surface gradient, sidebar tokens, semantic component tokens, and enforced design usage rules.
120
+
121
+ See [PollyMorph on GitHub](https://github.com/snhaman/PollyMorph) for the full token source and changelog.
@@ -0,0 +1,9 @@
1
+ import { P as PollyMorph } from './types-C6UlcDOW.mjs';
2
+ export { C as ColorStep, a as ColorTokens, E as ElevationLevel, b as ElevationTokens, F as FontTokens, c as PlatformSurface, d as PollyMorphRules, e as PollyMorphTokens, S as StatusColorRules } from './types-C6UlcDOW.mjs';
3
+ export { colorBlack, colorBlue, colorCyan, colorGreen, colorNeutral, colorNeutralBlue, colorNeutralCyan, colorNeutralOrange, colorNeutralPink, colorNeutralPurple, colorNeutralRed, colorOrange, colorPink, colorPlatformSurfaceCss, colorPurple, colorRed, colorSecondaryBlue, colorSecondaryCyan, colorSecondaryOrange, colorSecondaryPink, colorSecondaryPurple, colorSecondaryRed, colorSidebarBg, colorSidebarNestedPanel, colorSidebarStroke, colorWhite, colorYellow, fontFamilyBase, fontFamilyGrotesk, fontFamilyIcon, fontFamilyInter, fontFamilyJetbrains, fontWeightBold, fontWeightExtraThick, fontWeightMedium, fontWeightNormal, fontWeightSemiBold, fontWeightThick, radius2xl, radiusFull, radiusLg, radiusMd, radiusNone, radiusSm, radiusXl, spacing0, spacing1, spacing10, spacing12, spacing16, spacing2, spacing3, spacing4, spacing5, spacing6, spacing8, tokens } from './tokens.mjs';
4
+ export { ruleButtonPrimary, ruleButtonSecondary, ruleCardBg, ruleCards, ruleFontInter, ruleFontMixing, ruleFontMono, ruleFontSpaceGrotesk, ruleInteractiveLinks, ruleMutedText, ruleNonBrandAccents, rulePageStructure, rulePagination, rulePlatformSurface, rulePrimaryOrange, rulePrimaryPurple, ruleSidebarActiveState, ruleSidebarBg, ruleSidebarStroke, ruleStatusBlue, ruleStatusGreen, ruleStatusRed, ruleStatusYellow, ruleTables, ruleTabs, rules } from './rules.mjs';
5
+
6
+ /** Full typed PollyMorph object — tokens + rules */
7
+ declare const pollymorph: PollyMorph;
8
+
9
+ export { PollyMorph, pollymorph as default };
@@ -0,0 +1,9 @@
1
+ import { P as PollyMorph } from './types-C6UlcDOW.js';
2
+ export { C as ColorStep, a as ColorTokens, E as ElevationLevel, b as ElevationTokens, F as FontTokens, c as PlatformSurface, d as PollyMorphRules, e as PollyMorphTokens, S as StatusColorRules } from './types-C6UlcDOW.js';
3
+ export { colorBlack, colorBlue, colorCyan, colorGreen, colorNeutral, colorNeutralBlue, colorNeutralCyan, colorNeutralOrange, colorNeutralPink, colorNeutralPurple, colorNeutralRed, colorOrange, colorPink, colorPlatformSurfaceCss, colorPurple, colorRed, colorSecondaryBlue, colorSecondaryCyan, colorSecondaryOrange, colorSecondaryPink, colorSecondaryPurple, colorSecondaryRed, colorSidebarBg, colorSidebarNestedPanel, colorSidebarStroke, colorWhite, colorYellow, fontFamilyBase, fontFamilyGrotesk, fontFamilyIcon, fontFamilyInter, fontFamilyJetbrains, fontWeightBold, fontWeightExtraThick, fontWeightMedium, fontWeightNormal, fontWeightSemiBold, fontWeightThick, radius2xl, radiusFull, radiusLg, radiusMd, radiusNone, radiusSm, radiusXl, spacing0, spacing1, spacing10, spacing12, spacing16, spacing2, spacing3, spacing4, spacing5, spacing6, spacing8, tokens } from './tokens.js';
4
+ export { ruleButtonPrimary, ruleButtonSecondary, ruleCardBg, ruleCards, ruleFontInter, ruleFontMixing, ruleFontMono, ruleFontSpaceGrotesk, ruleInteractiveLinks, ruleMutedText, ruleNonBrandAccents, rulePageStructure, rulePagination, rulePlatformSurface, rulePrimaryOrange, rulePrimaryPurple, ruleSidebarActiveState, ruleSidebarBg, ruleSidebarStroke, ruleStatusBlue, ruleStatusGreen, ruleStatusRed, ruleStatusYellow, ruleTables, ruleTabs, rules } from './rules.js';
5
+
6
+ /** Full typed PollyMorph object — tokens + rules */
7
+ declare const pollymorph: PollyMorph;
8
+
9
+ export { PollyMorph, pollymorph as default };