Skip to content

Commit ca11472

Browse files
mstijakmstijak
committed
Stackblitz improvements
1 parent 66e3469 commit ca11472

File tree

10 files changed

+182
-149
lines changed

10 files changed

+182
-149
lines changed

‎homedocs/src/components/CodeExample.astro‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { Code } from "astro:components";
33
import * as prettier from "prettier";
4+
import lucideIcons from "../icons/lucide?raw";
45
56
interface Props {
67
title?: string;
@@ -141,7 +142,8 @@ function generateStackBlitzProject(
141142
"index.html": generateIndexHtml(),
142143
"src/theme.css": generateThemeCss(),
143144
"src/app.tsx": generateAppTsx(),
144-
"src/index.tsx": generateIndexTsx(code, imports, sections),
145+
"src/index.tsx": generateIndexTsx(code),
146+
"src/icons.tsx": lucideIcons
145147
},
146148
template: "node" as const,
147149
title: "CxJS Example",
@@ -154,18 +156,20 @@ function generatePackageJson() {
154156
{
155157
name: "cxjs-example",
156158
version: "1.0.0",
159+
private: true,
157160
type: "module",
158161
scripts: { dev: "vite", build: "vite build" },
159162
dependencies: {
160163
cx: "latest",
161164
"cx-react": "latest",
162-
"cx-theme-space-blue": "latest",
163-
react: "^18.2.0",
164-
"react-dom": "^18.2.0",
165+
"cx-theme-variables": "latest",
166+
react: "^19.2.0",
167+
"react-dom": "^19.2.0",
168+
"lucide": "^0.562.0",
165169
},
166170
devDependencies: {
167-
"@types/react": "^18.2.0",
168-
"@types/react-dom": "^18.2.0",
171+
"@types/react": "^19.2.0",
172+
"@types/react-dom": "^19.2.0",
169173
typescript: "^5.0.0",
170174
vite: "^5.0.0",
171175
},
@@ -218,8 +222,9 @@ function generateIndexHtml() {
218222
<meta charset="UTF-8" />
219223
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
220224
<title>CxJS Example</title>
225+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
221226
<style>
222-
html, body { height: 100%; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
227+
html, body { height: 100%; margin: 0; padding: 0; }
223228
#app { }
224229
.app-frame {
225230
min-height: 100px;
@@ -239,18 +244,22 @@ function generateIndexHtml() {
239244
}
240245
241246
function generateThemeCss() {
242-
return `@import "cx-theme-space-blue/dist/reset.css";
243-
@import "cx-theme-space-blue/dist/widgets.css";
244-
@import "cx-theme-space-blue/dist/charts.css";
245-
@import "cx-theme-space-blue/dist/svg.css";`;
247+
return `@import "cx-theme-variables/dist/reset.css";
248+
@import "cx-theme-variables/dist/widgets.css";
249+
@import "cx-theme-variables/dist/charts.css";
250+
@import "cx-theme-variables/dist/svg.css";`;
246251
}
247252
248253
function generateAppTsx() {
249254
return `import "./theme.css";
250255
import { startAppLoop } from "cx/ui";
251256
import { Store } from "cx/data";
257+
import { renderThemeVariables, docsLightPreset } from "cx-theme-variables";
258+
import "./icons";
252259
import Content from "./index";
253260
261+
renderThemeVariables(docsLightPreset);
262+
254263
const store = new Store();
255264
256265
startAppLoop(
@@ -281,6 +290,7 @@ function generateIndexTsx(fullCode: string) {
281290
return fullCode
282291
.split("\n")
283292
.filter((line) => !line.trim().match(/^\/\/\s*@(model|controller|components|index)(-end)?$/))
293+
.filter((line) => !line.trim().match(/^import\s+['"].*icons\/lucide.*['"];?\s*$/))
284294
.join("\n");
285295
}
286296

‎homedocs/src/examples/charts/BarGraphExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,6 @@ export default (
7272
/>
7373
</Chart>
7474
</Svg>
75-
</Legend>
75+
</LegendScope>
7676
);
7777
// @index-end

‎packages/cx-theme-variables/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ renderThemeVariables(darkBluePreset, ".dark-section");
215215
| `--cx-theme-active-state-pressed-amount` | `12%` | Pressed overlay opacity |
216216
| `--cx-theme-border-radius` | `4px` | Default border radius |
217217
| `--cx-theme-box-shadow` | Material shadow | Standard elevation shadow |
218-
| `--cx-overlay-box-shadow` | Material shadow | Overlay/elevated shadow |
218+
| `--cx-overlay-box-shadow` | Material shadow | Overlay/elevated shadow |
219219
| `--cx-theme-focus-box-shadow` | Focus ring | Focus indicator shadow |
220220
| `--cx-theme-transition` | `all 0.2s ease` | Default transition |
221221

‎packages/cx-theme-variables/build.js‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,15 @@ async function build() {
3232
theme("dist/reset.css"),
3333
),
3434
buildSCSS(
35-
[
36-
themeSrc("variables.scss"),
37-
cxSrc("variables.scss"),
38-
cxSrc("widgets/index.scss"),
39-
cxSrc("ui/index.scss"),
40-
],
35+
[themeSrc("widgets.scss")],
4136
theme("dist/widgets.css"),
4237
),
4338
buildSCSS(
44-
[
45-
themeSrc("variables.scss"),
46-
cxSrc("variables.scss"),
47-
cxSrc("charts/index.scss"),
48-
],
39+
[themeSrc("charts.scss")],
4940
theme("dist/charts.css"),
5041
),
5142
buildSCSS(
52-
[
53-
themeSrc("variables.scss"),
54-
cxSrc("variables.scss"),
55-
cxSrc("svg/index.scss"),
56-
],
43+
[themeSrc("svg.scss")],
5744
theme("dist/svg.css"),
5845
),
5946
]);

‎packages/cx-theme-variables/package.json‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
{
2-
"name": "cx-theme-variables",
3-
"version": "26.1.0",
4-
"description": "CSS Variables-based theme for Cx applications with customizable colors",
5-
"main": "./build/index.js",
6-
"types": "./build/index.d.ts",
7-
"exports": {
8-
".": {
9-
"types": "./build/index.d.ts",
10-
"default": "./build/index.js"
11-
},
12-
"./src/": "./src/",
13-
"./build/": "./build/",
14-
"./dist/": "./dist/"
15-
},
16-
"sideEffects": true,
17-
"author": "Codaxy",
18-
"license": "SEE LICENSE.md",
19-
"scripts": {
20-
"build": "yarn compile && node build",
21-
"compile": "tsc",
22-
"check-types": "tsc --noEmit"
23-
},
24-
"files": [
25-
"README.md",
26-
"LICENSE.md",
27-
"src",
28-
"dist",
29-
"build"
30-
],
31-
"peerDependencies": {
32-
"cx": "*"
33-
},
34-
"devDependencies": {
35-
"cx": "workspace:*",
36-
"typescript": "^5.9.3"
37-
}
2+
"name": "cx-theme-variables",
3+
"version": "26.1.1",
4+
"description": "CSS Variables-based theme for Cx applications with customizable colors",
5+
"main": "./build/index.js",
6+
"types": "./build/index.d.ts",
7+
"exports": {
8+
".": {
9+
"types": "./build/index.d.ts",
10+
"default": "./build/index.js"
11+
},
12+
"./src/": "./src/",
13+
"./build/": "./build/",
14+
"./dist/": "./dist/"
15+
},
16+
"sideEffects": true,
17+
"author": "Codaxy",
18+
"license": "SEE LICENSE.md",
19+
"scripts": {
20+
"build": "yarn compile && node build",
21+
"compile": "tsc",
22+
"check-types": "tsc --noEmit"
23+
},
24+
"files": [
25+
"README.md",
26+
"LICENSE.md",
27+
"src",
28+
"dist",
29+
"build"
30+
],
31+
"peerDependencies": {
32+
"cx": "*"
33+
},
34+
"devDependencies": {
35+
"cx": "workspace:*",
36+
"typescript": "^5.9.3"
37+
}
3838
}

‎packages/cx-theme-variables/src/charts.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// 1. Load theme variables FIRST (configures cx variables)
2+
@use "./variables.scss" as *;
3+
4+
// 2. Load theme maps (configures cx maps)
5+
@use "./maps.scss" as *;
6+
7+
// 3. Load theme functions
8+
@use "./functions.scss" as *;
9+
10+
// 4. Load cx charts which generates CSS using configured values
11+
@use "cx/src/charts/index" as *;

‎packages/cx-theme-variables/src/index.scss‎

Lines changed: 2 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@use "sass:map";
2-
@use "sass:color";
3-
41
// 1. Load theme variables FIRST (configures cx variables)
52
@use "./variables.scss" as *;
63

@@ -13,84 +10,5 @@
1310
// 4. NOW load cx/src/index which generates CSS using configured values
1411
@use "cx/src/index" as *;
1512

16-
// 5. Load include utilities for conditional CSS
17-
@use "cx/src/util/scss/include" as *;
18-
19-
$block: map.get($cx-besm, block);
20-
$element: map.get($cx-besm, element);
21-
$state: map.get($cx-besm, state);
22-
$mod: map.get($cx-besm, mod);
23-
24-
// 6. Component-specific overrides
25-
@if (cx-included("cx/widgets/Tab")) {
26-
//TAB
27-
.#{$block}tab.#{$mod}classic {
28-
&:first-child {
29-
border-left-width: 1px;
30-
border-left-color: var(--cx-theme-border-color);
31-
}
32-
}
33-
}
34-
35-
@if (cx-included("cx/widgets/Calendar")) {
36-
.#{$block}calendar.#{$mod}dropdown {
37-
--cx-calendar-border-width: 0;
38-
}
39-
}
40-
41-
@if (cx-included("cx/widgets/MonthPicker")) {
42-
.#{$block}monthpicker.#{$mod}dropdown {
43-
--cx-monthpicker-border-width: 0;
44-
}
45-
}
46-
47-
@if (cx-included("cx/widgets/ColorPicker")) {
48-
.#{$block}colorpicker.#{$mod}dropdown {
49-
--cx-colorpicker-border-width: 0;
50-
}
51-
}
52-
53-
@if (cx-included("cx/widgets/List")) {
54-
.#{$block}list.#{$mod}bordered,
55-
.#{$block}list.#{$mod}dropdown {
56-
border-radius: var(--cx-theme-border-radius);
57-
58-
> .#{$element}list-item:first-child {
59-
border-top-left-radius: var(--cx-theme-border-radius);
60-
border-top-right-radius: var(--cx-theme-border-radius);
61-
}
62-
63-
> .#{$element}list-item:last-child {
64-
border-bottom-left-radius: var(--cx-theme-border-radius);
65-
border-bottom-right-radius: var(--cx-theme-border-radius);
66-
}
67-
}
68-
}
69-
70-
@if (cx-included("cx/widgets/Grid")) {
71-
.#{$element}grid-data:last-child {
72-
border-bottom-left-radius: var(--cx-grid-border-radius);
73-
}
74-
75-
.#{$element}grid-data.#{$state}cursor {
76-
td:first-child {
77-
border-top-left-radius: var(--cx-cursor-border-radius);
78-
border-bottom-left-radius: var(--cx-cursor-border-radius);
79-
}
80-
81-
td:last-child {
82-
border-top-right-radius: var(--cx-cursor-border-radius);
83-
border-bottom-right-radius: var(--cx-cursor-border-radius);
84-
}
85-
}
86-
87-
.#{$element}grid-header {
88-
--cx-input-padding-x: calc(var(--cx-grid-header-padding-x) - 1px);
89-
--cx-input-padding-y: calc(var(--cx-grid-header-padding-y) - 1px);
90-
}
91-
92-
.#{$element}grid-data .#{$block}checkbox {
93-
--cx-input-padding-x: calc(var(--cx-grid-data-padding-x) - 1px);
94-
--cx-input-padding-y: calc(var(--cx-grid-data-padding-y) - 1px);
95-
}
96-
}
13+
// 5. Component-specific overrides
14+
@use "./overrides.scss";

0 commit comments

Comments
 (0)