@amulet-laboratories/hex 0.3.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.
Files changed (149) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +120 -0
  3. package/dist/aldricpace.css +5 -0
  4. package/dist/briarcove.css +5 -0
  5. package/dist/briarcovelib.css +5 -0
  6. package/dist/compass.css +5 -0
  7. package/dist/duskline.css +5 -0
  8. package/dist/forge.css +5 -0
  9. package/dist/garden.css +5 -0
  10. package/dist/greyline.css +5 -0
  11. package/dist/hex.css +5 -0
  12. package/dist/kbcv.css +5 -0
  13. package/dist/lanternhouse.css +5 -0
  14. package/dist/marenlys.css +5 -0
  15. package/dist/quizbit.css +5 -0
  16. package/dist/saltsignal.css +5 -0
  17. package/dist/scoped.css +1 -0
  18. package/dist/spacewizard.css +5 -0
  19. package/dist/tidemark.css +5 -0
  20. package/dist/undertow.css +5 -0
  21. package/dist/vscode.css +5 -0
  22. package/package.json +119 -0
  23. package/src/index.css +10 -0
  24. package/src/scoped/bridge.css +47 -0
  25. package/src/scoped/index.css +51 -0
  26. package/src/scoped/themes/aldricpace.css +115 -0
  27. package/src/scoped/themes/briarcove.css +123 -0
  28. package/src/scoped/themes/briarcovelib.css +111 -0
  29. package/src/scoped/themes/compass.css +111 -0
  30. package/src/scoped/themes/duskline.css +117 -0
  31. package/src/scoped/themes/forge.css +123 -0
  32. package/src/scoped/themes/garden.css +123 -0
  33. package/src/scoped/themes/greyline.css +116 -0
  34. package/src/scoped/themes/kbcv.css +111 -0
  35. package/src/scoped/themes/lanternhouse.css +111 -0
  36. package/src/scoped/themes/marenlys.css +112 -0
  37. package/src/scoped/themes/quizbit.css +101 -0
  38. package/src/scoped/themes/saltsignal.css +114 -0
  39. package/src/scoped/themes/spacewizard.css +115 -0
  40. package/src/scoped/themes/tidemark.css +119 -0
  41. package/src/scoped/themes/undertow.css +113 -0
  42. package/src/scoped/themes/vscode.css +230 -0
  43. package/src/scoped/tokens.css +21 -0
  44. package/src/shared/a11y.css +175 -0
  45. package/src/shared/components/core.css +1654 -0
  46. package/src/shared/components/data.css +418 -0
  47. package/src/shared/components/editor.css +358 -0
  48. package/src/shared/components/extras.css +897 -0
  49. package/src/shared/components/layout.css +663 -0
  50. package/src/shared/components/lists.css +278 -0
  51. package/src/shared/components/menus.css +377 -0
  52. package/src/shared/components/nav.css +943 -0
  53. package/src/shared/components/prose.css +302 -0
  54. package/src/shared/components/shell.css +528 -0
  55. package/src/shared/components/spatial.css +184 -0
  56. package/src/shared/components/temporal.css +191 -0
  57. package/src/shared/components/web.css +1689 -0
  58. package/src/shared/rig-defaults.css +121 -0
  59. package/src/shared/scroll-animations.css +176 -0
  60. package/src/shared/tokens.css +125 -0
  61. package/src/shared/utilities.css +204 -0
  62. package/src/themes/aldricpace/base.css +114 -0
  63. package/src/themes/aldricpace/components.css +22 -0
  64. package/src/themes/aldricpace/domains.css +19 -0
  65. package/src/themes/aldricpace/index.css +6 -0
  66. package/src/themes/aldricpace/tokens.css +169 -0
  67. package/src/themes/andrewpassanisi/base.css +192 -0
  68. package/src/themes/andrewpassanisi/index.css +11 -0
  69. package/src/themes/andrewpassanisi/tokens.css +136 -0
  70. package/src/themes/briarcove/base.css +170 -0
  71. package/src/themes/briarcove/components.css +27 -0
  72. package/src/themes/briarcove/domains.css +72 -0
  73. package/src/themes/briarcove/index.css +6 -0
  74. package/src/themes/briarcove/tokens.css +179 -0
  75. package/src/themes/briarcovelib/base.css +111 -0
  76. package/src/themes/briarcovelib/components.css +22 -0
  77. package/src/themes/briarcovelib/domains.css +19 -0
  78. package/src/themes/briarcovelib/index.css +6 -0
  79. package/src/themes/briarcovelib/tokens.css +167 -0
  80. package/src/themes/compass/base.css +112 -0
  81. package/src/themes/compass/components.css +22 -0
  82. package/src/themes/compass/domains.css +19 -0
  83. package/src/themes/compass/index.css +6 -0
  84. package/src/themes/compass/tokens.css +167 -0
  85. package/src/themes/duskline/base.css +167 -0
  86. package/src/themes/duskline/components.css +27 -0
  87. package/src/themes/duskline/domains.css +72 -0
  88. package/src/themes/duskline/index.css +6 -0
  89. package/src/themes/duskline/tokens.css +171 -0
  90. package/src/themes/forge/base.css +165 -0
  91. package/src/themes/forge/components.css +24 -0
  92. package/src/themes/forge/domains.css +72 -0
  93. package/src/themes/forge/index.css +6 -0
  94. package/src/themes/forge/tokens.css +178 -0
  95. package/src/themes/garden/base.css +167 -0
  96. package/src/themes/garden/components.css +27 -0
  97. package/src/themes/garden/domains.css +72 -0
  98. package/src/themes/garden/index.css +6 -0
  99. package/src/themes/garden/tokens.css +178 -0
  100. package/src/themes/greyline/base.css +165 -0
  101. package/src/themes/greyline/components.css +24 -0
  102. package/src/themes/greyline/domains.css +70 -0
  103. package/src/themes/greyline/index.css +6 -0
  104. package/src/themes/greyline/tokens.css +161 -0
  105. package/src/themes/kbcv/base.css +112 -0
  106. package/src/themes/kbcv/components.css +22 -0
  107. package/src/themes/kbcv/domains.css +19 -0
  108. package/src/themes/kbcv/index.css +6 -0
  109. package/src/themes/kbcv/tokens.css +167 -0
  110. package/src/themes/lanternhouse/base.css +170 -0
  111. package/src/themes/lanternhouse/components.css +27 -0
  112. package/src/themes/lanternhouse/domains.css +72 -0
  113. package/src/themes/lanternhouse/index.css +6 -0
  114. package/src/themes/lanternhouse/tokens.css +167 -0
  115. package/src/themes/marenlys/base.css +181 -0
  116. package/src/themes/marenlys/components.css +27 -0
  117. package/src/themes/marenlys/domains.css +72 -0
  118. package/src/themes/marenlys/index.css +6 -0
  119. package/src/themes/marenlys/tokens.css +167 -0
  120. package/src/themes/quizbit/base.css +120 -0
  121. package/src/themes/quizbit/components.css +27 -0
  122. package/src/themes/quizbit/domains.css +7 -0
  123. package/src/themes/quizbit/index.css +6 -0
  124. package/src/themes/quizbit/tokens.css +132 -0
  125. package/src/themes/saltsignal/base.css +168 -0
  126. package/src/themes/saltsignal/components.css +27 -0
  127. package/src/themes/saltsignal/domains.css +72 -0
  128. package/src/themes/saltsignal/index.css +6 -0
  129. package/src/themes/saltsignal/tokens.css +170 -0
  130. package/src/themes/spacewizard/base.css +165 -0
  131. package/src/themes/spacewizard/components.css +24 -0
  132. package/src/themes/spacewizard/domains.css +70 -0
  133. package/src/themes/spacewizard/index.css +6 -0
  134. package/src/themes/spacewizard/tokens.css +160 -0
  135. package/src/themes/tidemark/base.css +169 -0
  136. package/src/themes/tidemark/components.css +27 -0
  137. package/src/themes/tidemark/domains.css +72 -0
  138. package/src/themes/tidemark/index.css +6 -0
  139. package/src/themes/tidemark/tokens.css +175 -0
  140. package/src/themes/undertow/base.css +114 -0
  141. package/src/themes/undertow/components.css +22 -0
  142. package/src/themes/undertow/domains.css +19 -0
  143. package/src/themes/undertow/index.css +6 -0
  144. package/src/themes/undertow/tokens.css +171 -0
  145. package/src/themes/vscode/base.css +104 -0
  146. package/src/themes/vscode/components.css +24 -0
  147. package/src/themes/vscode/domains.css +132 -0
  148. package/src/themes/vscode/index.css +13 -0
  149. package/src/themes/vscode/tokens.css +346 -0
package/src/themes/garden/base.css ADDED
@@ -0,0 +1,167 @@
1
+ /* Hex — Garden Base Styles
2
+ * html/body defaults, scrollbar, focus, selection, transitions.
3
+ * Warm serif typography with dark purple canvas.
4
+ */
5
+
6
+ @reference 'tailwindcss';
7
+ @reference './tokens.css';
8
+
9
+ /* Base styles */
10
+ html {
11
+ /* Keep 16px on <html> so Tailwind rem utilities stay correctly sized */
12
+ font-size: 16px;
13
+ }
14
+
15
+ html,
16
+ body {
17
+ @apply bg-background text-foreground font-sans;
18
+
19
+ color-scheme: dark;
20
+ -webkit-font-smoothing: antialiased;
21
+ -moz-osx-font-smoothing: grayscale;
22
+ }
23
+
24
+ body {
25
+ /* Match original: 24px body, weight 300, relaxed leading */
26
+ font-size: 24px;
27
+ font-weight: 300;
28
+ line-height: 1.6;
29
+ }
30
+
31
+ /* Heading defaults — mirror original's h1/h2 rules */
32
+ h1 {
33
+ font-size: 77px;
34
+ font-weight: 700;
35
+ color: var(--color-primary);
36
+ margin: 0;
37
+ padding: 0;
38
+ line-height: 1.1;
39
+ }
40
+
41
+ h2 {
42
+ font-size: 76px;
43
+ font-weight: 100;
44
+ color: var(--color-primary);
45
+ margin: 0;
46
+ padding: 0;
47
+ line-height: 1.1;
48
+ }
49
+
50
+ /* Scrollbar */
51
+ ::-webkit-scrollbar {
52
+ width: 8px;
53
+ height: 8px;
54
+ }
55
+
56
+ ::-webkit-scrollbar-track {
57
+ background: transparent;
58
+ }
59
+
60
+ ::-webkit-scrollbar-thumb {
61
+ background: color-mix(in srgb, var(--color-foreground) 15%, transparent);
62
+ border-radius: 4px;
63
+ }
64
+
65
+ ::-webkit-scrollbar-thumb:hover {
66
+ background: color-mix(in srgb, var(--color-foreground) 25%, transparent);
67
+ }
68
+
69
+ /* Focus styles */
70
+ *:focus-visible {
71
+ outline: 2px solid var(--color-primary);
72
+ outline-offset: 2px;
73
+ }
74
+
75
+ /* Selection */
76
+ ::selection {
77
+ background: color-mix(in srgb, var(--color-primary) 40%, transparent);
78
+ color: var(--color-foreground);
79
+ }
80
+
81
+ /* Smooth scrolling */
82
+ html {
83
+ scroll-behavior: smooth;
84
+ }
85
+
86
+ /* Reduced motion — disable animations and transitions */
87
+ @media (prefers-reduced-motion: reduce) {
88
+ *,
89
+ *::before,
90
+ *::after {
91
+ animation-duration: 0.01ms !important;
92
+ animation-iteration-count: 1 !important;
93
+ transition-duration: 0.01ms !important;
94
+ scroll-behavior: auto !important;
95
+ }
96
+ }
97
+
98
+ /* Firefox scrollbar */
99
+ * {
100
+ scrollbar-width: thin;
101
+ scrollbar-color: color-mix(in srgb, var(--color-foreground) 15%, transparent) transparent;
102
+ }
103
+
104
+ /* ───────── Scroll-draw SVG utility ───────── */
105
+
106
+ @keyframes scroll-draw-in {
107
+ from {
108
+ stroke-dashoffset: 1;
109
+ }
110
+
111
+ to {
112
+ stroke-dashoffset: 0;
113
+ }
114
+ }
115
+
116
+ .scroll-draw path,
117
+ .scroll-draw line,
118
+ .scroll-draw polyline,
119
+ .scroll-draw polygon,
120
+ .scroll-draw circle,
121
+ .scroll-draw ellipse {
122
+ stroke-dasharray: 1;
123
+ stroke-dashoffset: 1;
124
+ animation: scroll-draw-in linear both;
125
+ animation-timeline: view();
126
+ animation-range: entry 20% cover 50%;
127
+ }
128
+
129
+ @media (prefers-reduced-motion: reduce) {
130
+ .scroll-draw path,
131
+ .scroll-draw line,
132
+ .scroll-draw polyline,
133
+ .scroll-draw polygon,
134
+ .scroll-draw circle,
135
+ .scroll-draw ellipse {
136
+ animation: none;
137
+ stroke-dashoffset: 0;
138
+ }
139
+ }
140
+
141
+ /* ───────── Scroll-reveal utility ───────── */
142
+
143
+ @keyframes scroll-fade-in {
144
+ from {
145
+ opacity: 0;
146
+ transform: translateY(20px);
147
+ }
148
+
149
+ to {
150
+ opacity: 1;
151
+ transform: translateY(0);
152
+ }
153
+ }
154
+
155
+ .scroll-reveal {
156
+ animation: scroll-fade-in linear both;
157
+ animation-timeline: view();
158
+ animation-range: entry 10% cover 30%;
159
+ }
160
+
161
+ @media (prefers-reduced-motion: reduce) {
162
+ .scroll-reveal {
163
+ animation: none;
164
+ opacity: 1;
165
+ transform: none;
166
+ }
167
+ }
package/src/themes/garden/components.css ADDED
@@ -0,0 +1,27 @@
1
+ /* Hex — Garden Component Barrel
2
+ * Imports shared component CSS (one file per Rig package).
3
+ * Components use only semantic tokens — Tailwind resolves them
4
+ * against this theme's tokens.css at build time.
5
+ * @import rules must precede @reference so postcss-import can inline them.
6
+ */
7
+
8
+ @import '../../shared/rig-defaults.css';
9
+ @import '../../shared/components/core.css';
10
+ @import '../../shared/components/layout.css';
11
+ @import '../../shared/components/nav.css';
12
+ @import '../../shared/components/editor.css';
13
+ @import '../../shared/components/lists.css';
14
+ @import '../../shared/components/menus.css';
15
+ @import '../../shared/components/extras.css';
16
+ @import '../../shared/components/shell.css';
17
+ @import '../../shared/components/data.css';
18
+ @import '../../shared/components/spatial.css';
19
+ @import '../../shared/components/temporal.css';
20
+ @import '../../shared/components/web.css';
21
+ @import '../../shared/a11y.css';
22
+ @import '../../shared/components/prose.css';
23
+ @import '../../shared/utilities.css';
24
+ @import '../../shared/scroll-animations.css';
25
+
26
+ @reference 'tailwindcss';
27
+ @reference './tokens.css';
package/src/themes/garden/domains.css ADDED
@@ -0,0 +1,72 @@
1
+ /* Hex — Garden Domains
2
+ * Domain accent colors, responsive breakpoints, unstyled overrides.
3
+ * Garden is a marketing/portfolio theme — domains are less relevant
4
+ * but included for contract compatibility.
5
+ */
6
+
7
+ @reference 'tailwindcss';
8
+ @reference './tokens.css';
9
+
10
+ /* ───────── Domain accent colors ───────── */
11
+
12
+ [data-domain='legal'] {
13
+ --domain-accent: #3b82f6;
14
+ }
15
+
16
+ [data-domain='life'] {
17
+ --domain-accent: #eab308;
18
+ }
19
+
20
+ [data-domain='software'] {
21
+ --domain-accent: #ef4444;
22
+ }
23
+
24
+ [data-domain='business'] {
25
+ --domain-accent: #f97316;
26
+ }
27
+
28
+ [data-domain='history'] {
29
+ --domain-accent: #22c55e;
30
+ }
31
+
32
+ [data-domain='world'] {
33
+ --domain-accent: #a855f7;
34
+ }
35
+
36
+ /* ───────── Responsive: Marketing site ───────── */
37
+
38
+ @media (width <= 700px) {
39
+ [data-rig-shell-grid] {
40
+ grid-template-areas:
41
+ 'editor'
42
+ 'panel'
43
+ 'statusbar';
44
+ grid-template-columns: 1fr;
45
+ grid-template-rows: 1fr auto auto;
46
+ }
47
+
48
+ [data-rig-shell-activity] {
49
+ display: none;
50
+ }
51
+
52
+ [data-rig-shell-sidebar] {
53
+ display: none;
54
+ }
55
+ }
56
+
57
+ /* ───────── Unstyled theme overrides ───────── */
58
+
59
+ [data-theme='unstyled'] *,
60
+ [data-theme='unstyled'] *::before,
61
+ [data-theme='unstyled'] *::after {
62
+ color: revert !important;
63
+ background-color: revert !important;
64
+ background: revert !important;
65
+ border-color: revert !important;
66
+ box-shadow: none !important;
67
+ text-shadow: none !important;
68
+ backdrop-filter: none !important;
69
+ opacity: 1 !important;
70
+
71
+ --domain-accent: initial !important;
72
+ }
package/src/themes/garden/index.css ADDED
@@ -0,0 +1,6 @@
1
+ @import 'tailwindcss';
2
+ @import '../../shared/tokens.css';
3
+ @import './tokens.css';
4
+ @import './base.css';
5
+ @import './components.css';
6
+ @import './domains.css';
package/src/themes/garden/tokens.css ADDED
@@ -0,0 +1,178 @@
1
+ /* Hex — Garden Design Tokens
2
+ * Warm botanical palette derived from Garden Estudio's brand identity.
3
+ * Deep purple background, warm cream text, rose accents, botanical greens.
4
+ * Dark mode marketing theme — suited for portfolio and showcase sites.
5
+ *
6
+ * Full palette (13 swatch colors):
7
+ * #331F3C deep purple — background
8
+ * #AC3954 dark rose — secondary, borders
9
+ * #EB4963 amulet rose — primary brand
10
+ * #F16874 warm pink — accent
11
+ * #F58384 coral pink — destructive
12
+ * #F99C94 warm salmon — status
13
+ * #F9B0A2 light salmon — muted foreground
14
+ * #F8C7B3 apricot — soft accent
15
+ * #F7D7B9 peach — warning
16
+ * #F5E3BC warm cream — foreground text
17
+ * #EDECC0 pale chartreuse — subtle highlights
18
+ * #D8E8C3 sage green — info
19
+ * #CBE6C5 mint green — success
20
+ *
21
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
22
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
23
+ */
24
+
25
+ @theme {
26
+ /* Surface colors */
27
+ --color-background: #331f3c;
28
+ --color-foreground: #f5e3bc;
29
+ --color-card: #eb4963;
30
+ --color-card-foreground: #f5e3bc;
31
+ --color-popover: #331f3c;
32
+ --color-popover-foreground: #f5e3bc;
33
+
34
+ /* Brand */
35
+ --color-primary: #eb4963;
36
+ --color-primary-foreground: #f5e3bc;
37
+
38
+ /* Soft accents */
39
+ --color-secondary: #ac3954;
40
+ --color-secondary-foreground: #f5e3bc;
41
+ --color-muted: #ac3954;
42
+ --color-muted-foreground: #f9b0a2;
43
+ --color-accent: #f16874;
44
+ --color-accent-foreground: #331f3c;
45
+
46
+ /* Semantic status */
47
+ --color-destructive: #f58384;
48
+ --color-destructive-foreground: #331f3c;
49
+ --color-success: #cbe6c5;
50
+ --color-warning: #f7d7b9;
51
+ --color-info: #d8e8c3;
52
+
53
+ /* Borders and focus */
54
+ --color-border: #ac3954;
55
+ --color-input: #ac3954;
56
+ --color-ring: #eb4963;
57
+
58
+ /* Typography */
59
+ --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
60
+ --font-sans: 'Roboto Slab', 'Georgia', 'Times New Roman', serif;
61
+ --font-serif: 'Roboto Slab', 'Georgia', 'Times New Roman', serif;
62
+
63
+ /* Radius */
64
+ /* Typography — IDE-density type scale */
65
+ --font-size-2xs: 0.625rem;
66
+ --font-size-2xs--line-height: 1.25;
67
+ --font-size-xs: 0.75rem;
68
+ --font-size-xs--line-height: 1.5;
69
+ --font-size-sm: 0.8125rem;
70
+ --font-size-sm--line-height: 1.5;
71
+ --font-size-base: 0.875rem;
72
+ --font-size-base--line-height: 1.5;
73
+ --font-size-lg: 1.125rem;
74
+ --font-size-lg--line-height: 1.25;
75
+ --font-size-xl: 1.25rem;
76
+ --font-size-xl--line-height: 1.25;
77
+
78
+ /* Display font family */
79
+ --font-display: var(--font-sans);
80
+
81
+ --radius: 7px;
82
+ }
83
+
84
+ :root {
85
+ --background: #331f3c;
86
+ --foreground: #f5e3bc;
87
+ --card: #eb4963;
88
+ --card-foreground: #f5e3bc;
89
+ --popover: #331f3c;
90
+ --popover-foreground: #f5e3bc;
91
+ --primary: #eb4963;
92
+ --primary-foreground: #f5e3bc;
93
+ --secondary: #ac3954;
94
+ --secondary-foreground: #f5e3bc;
95
+ --muted: #ac3954;
96
+ --muted-foreground: #f9b0a2;
97
+ --accent: #f16874;
98
+ --accent-foreground: #331f3c;
99
+ --destructive: #f58384;
100
+ --destructive-foreground: #331f3c;
101
+ --success: #cbe6c5;
102
+ --warning: #f7d7b9;
103
+ --info: #d8e8c3;
104
+ --border: #ac3954;
105
+ --input: #ac3954;
106
+ --ring: #eb4963;
107
+ /* Typography — IDE-density type scale */
108
+ --font-size-2xs: 0.625rem;
109
+ --font-size-2xs--line-height: 1.25;
110
+ --font-size-xs: 0.75rem;
111
+ --font-size-xs--line-height: 1.5;
112
+ --font-size-sm: 0.8125rem;
113
+ --font-size-sm--line-height: 1.5;
114
+ --font-size-base: 0.875rem;
115
+ --font-size-base--line-height: 1.5;
116
+ --font-size-lg: 1.125rem;
117
+ --font-size-lg--line-height: 1.25;
118
+ --font-size-xl: 1.25rem;
119
+ --font-size-xl--line-height: 1.25;
120
+
121
+ /* Display font family */
122
+ --font-display: var(--font-sans);
123
+
124
+ --radius: 7px;
125
+
126
+ /* Typography — IDE-density type scale (shorthand aliases) */
127
+ --text-2xs: 0.625rem;
128
+ --text-xs: 0.75rem;
129
+ --text-sm: 0.8125rem;
130
+ --text-base: 0.875rem;
131
+ --text-lg: 1.125rem;
132
+ --text-xl: 1.25rem;
133
+ --leading-tight: 1.25;
134
+ --leading-snug: 1.375;
135
+ --leading-normal: 1.5;
136
+ --leading-relaxed: 1.625;
137
+ --weight-normal: 400;
138
+ --weight-medium: 500;
139
+ --weight-semibold: 600;
140
+ --weight-bold: 700;
141
+ --tracking-tight: -0.01em;
142
+ --tracking-normal: 0;
143
+ --tracking-wide: 0.05em;
144
+ --tracking-wider: 0.08em;
145
+ --font-display: var(--font-sans);
146
+ --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
147
+ --font-sans: 'Roboto Slab', 'Georgia', 'Times New Roman', serif;
148
+ --font-serif: 'Roboto Slab', 'Georgia', 'Times New Roman', serif;
149
+
150
+ /* ── Named palette aliases ──────────────────────────────────────────────
151
+ * All 13 swatch colors available for direct template use.
152
+ */
153
+ --garden-deep-purple: #331f3c;
154
+ --garden-dark-rose: #ac3954;
155
+ --garden-rose: #eb4963;
156
+ --garden-warm-pink: #f16874;
157
+ --garden-coral: #f58384;
158
+ --garden-warm-salmon: #f99c94;
159
+ --garden-light-salmon: #f9b0a2;
160
+ --garden-apricot: #f8c7b3;
161
+ --garden-peach: #f7d7b9;
162
+ --garden-cream: #f5e3bc;
163
+ --garden-chartreuse: #edecc0;
164
+ --garden-sage: #d8e8c3;
165
+ --garden-mint: #cbe6c5;
166
+
167
+ /* ── Rig component token bridge ─────────────────────────────────────────
168
+ * Overrides shared/tokens.css defaults where the Garden palette needs
169
+ * values that can't be derived directly from --color-* semantics.
170
+ */
171
+
172
+ /* Button — dark rose for hover feedback */
173
+ --rig-button-hover-bg: #ac3954;
174
+
175
+ /* Scrollbar — warm cream tint instead of neutral gray */
176
+ --rig-scrollbar-thumb: rgba(245, 227, 188, 0.18);
177
+ --rig-scrollbar-thumb-hover: rgba(245, 227, 188, 0.35);
178
+ }
package/src/themes/greyline/base.css ADDED
@@ -0,0 +1,165 @@
1
+ /* Hex — Greyline Base Styles
2
+ * html/body defaults, scrollbar, focus, selection, transitions.
3
+ * Clean sans-serif typography with near-black canvas.
4
+ */
5
+
6
+ @reference 'tailwindcss';
7
+ @reference './tokens.css';
8
+
9
+ /* Base styles */
10
+ html {
11
+ font-size: 16px;
12
+ }
13
+
14
+ html,
15
+ body {
16
+ @apply bg-background text-foreground font-sans;
17
+
18
+ color-scheme: dark;
19
+ -webkit-font-smoothing: antialiased;
20
+ -moz-osx-font-smoothing: grayscale;
21
+ }
22
+
23
+ body {
24
+ font-size: 24px;
25
+ font-weight: 300;
26
+ line-height: 1.6;
27
+ }
28
+
29
+ /* Heading defaults */
30
+ h1 {
31
+ font-size: 77px;
32
+ font-weight: 700;
33
+ color: var(--color-primary);
34
+ margin: 0;
35
+ padding: 0;
36
+ line-height: 1.1;
37
+ }
38
+
39
+ h2 {
40
+ font-size: 76px;
41
+ font-weight: 100;
42
+ color: var(--color-primary);
43
+ margin: 0;
44
+ padding: 0;
45
+ line-height: 1.1;
46
+ }
47
+
48
+ /* Scrollbar */
49
+ ::-webkit-scrollbar {
50
+ width: 8px;
51
+ height: 8px;
52
+ }
53
+
54
+ ::-webkit-scrollbar-track {
55
+ background: transparent;
56
+ }
57
+
58
+ ::-webkit-scrollbar-thumb {
59
+ background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
60
+ border-radius: 4px;
61
+ }
62
+
63
+ ::-webkit-scrollbar-thumb:hover {
64
+ background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
65
+ }
66
+
67
+ /* Focus styles */
68
+ *:focus-visible {
69
+ outline: 2px solid var(--color-primary);
70
+ outline-offset: 2px;
71
+ }
72
+
73
+ /* Selection */
74
+ ::selection {
75
+ background: color-mix(in srgb, var(--color-primary) 40%, transparent);
76
+ color: var(--color-foreground);
77
+ }
78
+
79
+ /* Smooth scrolling */
80
+ html {
81
+ scroll-behavior: smooth;
82
+ }
83
+
84
+ /* Reduced motion */
85
+ @media (prefers-reduced-motion: reduce) {
86
+ *,
87
+ *::before,
88
+ *::after {
89
+ animation-duration: 0.01ms !important;
90
+ animation-iteration-count: 1 !important;
91
+ transition-duration: 0.01ms !important;
92
+ scroll-behavior: auto !important;
93
+ }
94
+ }
95
+
96
+ /* Firefox scrollbar */
97
+ * {
98
+ scrollbar-width: thin;
99
+ scrollbar-color: color-mix(in srgb, var(--color-foreground) 12%, transparent) transparent;
100
+ }
101
+
102
+ /* ───────── Scroll-draw SVG utility ───────── */
103
+
104
+ @keyframes scroll-draw-in {
105
+ from {
106
+ stroke-dashoffset: 1;
107
+ }
108
+
109
+ to {
110
+ stroke-dashoffset: 0;
111
+ }
112
+ }
113
+
114
+ .scroll-draw path,
115
+ .scroll-draw line,
116
+ .scroll-draw polyline,
117
+ .scroll-draw polygon,
118
+ .scroll-draw circle,
119
+ .scroll-draw ellipse {
120
+ stroke-dasharray: 1;
121
+ stroke-dashoffset: 1;
122
+ animation: scroll-draw-in linear both;
123
+ animation-timeline: view();
124
+ animation-range: entry 20% cover 50%;
125
+ }
126
+
127
+ @media (prefers-reduced-motion: reduce) {
128
+ .scroll-draw path,
129
+ .scroll-draw line,
130
+ .scroll-draw polyline,
131
+ .scroll-draw polygon,
132
+ .scroll-draw circle,
133
+ .scroll-draw ellipse {
134
+ animation: none;
135
+ stroke-dashoffset: 0;
136
+ }
137
+ }
138
+
139
+ /* ───────── Scroll-reveal utility ───────── */
140
+
141
+ @keyframes scroll-fade-in {
142
+ from {
143
+ opacity: 0;
144
+ transform: translateY(20px);
145
+ }
146
+
147
+ to {
148
+ opacity: 1;
149
+ transform: translateY(0);
150
+ }
151
+ }
152
+
153
+ .scroll-reveal {
154
+ animation: scroll-fade-in linear both;
155
+ animation-timeline: view();
156
+ animation-range: entry 10% cover 30%;
157
+ }
158
+
159
+ @media (prefers-reduced-motion: reduce) {
160
+ .scroll-reveal {
161
+ animation: none;
162
+ opacity: 1;
163
+ transform: none;
164
+ }
165
+ }
package/src/themes/greyline/components.css ADDED
@@ -0,0 +1,24 @@
1
+ /* Hex — Greyline Component Barrel
2
+ * Imports shared component CSS (one file per Rig package).
3
+ * Components use only semantic tokens — Tailwind resolves them
4
+ * against this theme's tokens.css at build time.
5
+ * @import rules must precede @reference so postcss-import can inline them.
6
+ */
7
+
8
+ @import '../../shared/rig-defaults.css';
9
+ @import '../../shared/components/core.css';
10
+ @import '../../shared/components/layout.css';
11
+ @import '../../shared/components/nav.css';
12
+ @import '../../shared/components/editor.css';
13
+ @import '../../shared/components/lists.css';
14
+ @import '../../shared/components/menus.css';
15
+ @import '../../shared/components/extras.css';
16
+ @import '../../shared/components/shell.css';
17
+ @import '../../shared/components/data.css';
18
+ @import '../../shared/components/spatial.css';
19
+ @import '../../shared/components/temporal.css';
20
+ @import '../../shared/a11y.css';
21
+ @import '../../shared/components/prose.css';
22
+
23
+ @reference 'tailwindcss';
24
+ @reference './tokens.css';
package/src/themes/greyline/domains.css ADDED
@@ -0,0 +1,70 @@
1
+ /* Hex — Greyline Domains
2
+ * Domain accent colors, responsive breakpoints, unstyled overrides.
3
+ */
4
+
5
+ @reference 'tailwindcss';
6
+ @reference './tokens.css';
7
+
8
+ /* ───────── Domain accent colors ───────── */
9
+
10
+ [data-domain='legal'] {
11
+ --domain-accent: #3b82f6;
12
+ }
13
+
14
+ [data-domain='life'] {
15
+ --domain-accent: #eab308;
16
+ }
17
+
18
+ [data-domain='software'] {
19
+ --domain-accent: #ef4444;
20
+ }
21
+
22
+ [data-domain='business'] {
23
+ --domain-accent: #f97316;
24
+ }
25
+
26
+ [data-domain='history'] {
27
+ --domain-accent: #22c55e;
28
+ }
29
+
30
+ [data-domain='world'] {
31
+ --domain-accent: #a855f7;
32
+ }
33
+
34
+ /* ───────── Responsive: Marketing site ───────── */
35
+
36
+ @media (width <= 700px) {
37
+ [data-rig-shell-grid] {
38
+ grid-template-areas:
39
+ 'editor'
40
+ 'panel'
41
+ 'statusbar';
42
+ grid-template-columns: 1fr;
43
+ grid-template-rows: 1fr auto auto;
44
+ }
45
+
46
+ [data-rig-shell-activity] {
47
+ display: none;
48
+ }
49
+
50
+ [data-rig-shell-sidebar] {
51
+ display: none;
52
+ }
53
+ }
54
+
55
+ /* ───────── Unstyled theme overrides ───────── */
56
+
57
+ [data-theme='unstyled'] *,
58
+ [data-theme='unstyled'] *::before,
59
+ [data-theme='unstyled'] *::after {
60
+ color: revert !important;
61
+ background-color: revert !important;
62
+ background: revert !important;
63
+ border-color: revert !important;
64
+ box-shadow: none !important;
65
+ text-shadow: none !important;
66
+ backdrop-filter: none !important;
67
+ opacity: 1 !important;
68
+
69
+ --domain-accent: initial !important;
70
+ }