Skip to content

Commit c60f57e

Browse files
mstijakmstijak
committed
...
1 parent d2d0a9f commit c60f57e

File tree

20 files changed

+514
-475
lines changed

20 files changed

+514
-475
lines changed

‎.claude/settings.local.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
"Bash(git grep:*)",
4141
"Bash(node build/index.js:*)",
4242
"Bash(npx sass:*)",
43-
"mcp__playwright__browser_close"
43+
"mcp__playwright__browser_close",
44+
"Bash(npx webpack --mode development)"
4445
],
4546
"deny": [],
4647
"ask": []

‎docs/components/index.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
@import "ImportPath";
2-
@import "CodeSplit";
3-
@import "CodeSnippet";
4-
@import "ConfigTable";
5-
@import "MethodTable";
6-
@import "Zenburn";
7-
@import "SideNav";
8-
@import "EditOnGitX";
9-
@import "Floater";
10-
@import "DocSearch";
11-
@import "Md";
1+
@use "ImportPath";
2+
@use "CodeSplit";
3+
@use "CodeSnippet";
4+
@use "ConfigTable";
5+
@use "MethodTable";
6+
@use "Zenburn";
7+
@use "SideNav";
8+
@use "EditOnGitX";
9+
@use "Floater";
10+
@use "DocSearch";
11+
@use "Md";
1212

1313
.dxb-table {
1414
max-width: 50em;

‎docs/content/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
@import "Contents";
2-
@import "Article";
1+
@use "Contents";
2+
@use "Article";

‎docs/index.html‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
11
<!doctype html>
22
<html>
33
<head lang="en">
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
6-
<meta
7-
name="keywords"
8-
content="cx, cxjs, cx.js, cx js, cx framework, ui framework, front-end framework, javascript, javscript framework, js, js framework, webpack, react, babel, ria, spa, single page application, widgets, charts, dropdown, grid, select, multiselect, data-binding, layout, forms, form validation"
9-
/>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no">
6+
<meta name="keywords" content="cx, cxjs, cx.js, cx js, cx framework, ui framework, front-end framework, javascript, javscript framework, js, js framework, webpack, react, babel, ria, spa, single page application, widgets, charts, dropdown, grid, select, multiselect, data-binding, layout, forms, form validation">
107
<title>Cx - Documentation</title>
11-
<%= htmlWebpackPlugin.options.gtmh %>
12-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700" rel="stylesheet" type="text/css" />
13-
<link
14-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
15-
rel="stylesheet"
16-
type="text/css"
17-
/>
18-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
19-
</head>
8+
9+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700" rel="stylesheet" type="text/css">
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
12+
<link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script><link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script><link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script><link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script><link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script><link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script><link rel="icon" href="/favicon.png"><script defer="defer" src="/app.js"></script></head>
2013
<body>
21-
<%= htmlWebpackPlugin.options.gtmb %>
14+
2215
<div id="app"></div>
2316
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3" async></script>
2417
</body>

‎docs/index.scss‎

Lines changed: 30 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,60 @@
1-
@use "sass:math";
2-
@import "../misc/index";
1+
// Load all variables and maps first
2+
@use "./variables" as *;
3+
@use "./maps" as *;
34

4-
@use "~cx-theme-aquamarine/src/variables.scss" as *;
5-
$cx-theme-primary-color: $master-brand-highlight-color;
5+
// Load the theme CSS
6+
@use "cx-theme-aquamarine/src/index" as theme;
67

7-
@use "~cx-theme-aquamarine/src/maps.scss" as *;
8-
$cx-link-state-style-map: ();
8+
// Load misc styles
9+
@use "../misc/index" as misc;
910

10-
@import "~cx-theme-aquamarine/src/variables";
11-
12-
@function cx-divide($a, $b) {
13-
@return math.div($a, $b);
14-
}
15-
16-
$cx-tab-mods: cx-deep-map-merge(
17-
$cx-tab-mods,
18-
(
19-
code: cx-map-deep-get($cx-tab-mods, "line"),
20-
)
21-
);
22-
23-
@import "~cx-theme-aquamarine/src/index";
11+
// Load docs component and content styles
12+
@use "./app/index" as app;
13+
@use "./components/index" as components;
14+
@use "./content/index" as content;
2415

16+
// Page-level styles
2517
html {
26-
height: 100%;
18+
height: 100%;
2719
}
2820

2921
body {
30-
margin: 0;
31-
padding: 0;
32-
height: 100%;
33-
font-family: "Open Sans", sans-serif;
22+
margin: 0;
23+
padding: 0;
24+
height: 100%;
25+
font-family: "Open Sans", sans-serif;
3426
}
3527

3628
.anchor {
37-
visibility: hidden;
38-
display: block;
39-
position: relative;
40-
top: -100px;
29+
visibility: hidden;
30+
display: block;
31+
position: relative;
32+
top: -100px;
4133
}
4234

4335
.transition-appear {
44-
opacity: 0.1;
45-
transition: opacity 0.2s ease-in;
36+
opacity: 0.1;
37+
transition: opacity 0.2s ease-in;
4638
}
4739

4840
.transition-appear-active {
49-
opacity: 1;
41+
opacity: 1;
5042
}
5143

5244
.flex-column {
53-
display: flex;
54-
flex-direction: column;
45+
display: flex;
46+
flex-direction: column;
5547
}
5648

5749
.flex-row {
58-
display: flex;
59-
flex-direction: row;
50+
display: flex;
51+
flex-direction: row;
6052
}
6153

6254
.flex-start {
63-
align-items: flex-start !important;
55+
align-items: flex-start !important;
6456
}
6557

6658
a {
67-
color: #b93e8b;
59+
color: #b93e8b;
6860
}

‎docs/maps.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use "sass:map";
2+
3+
// Forward theme maps
4+
@forward "cx-theme-aquamarine/src/maps";
5+
6+
// Use maps locally
7+
@use "cx-theme-aquamarine/src/maps" as *;
8+
@use "cx/src/util/scss/deep-merge" as *;
9+
10+
// Add "code" tab mod (copy of "line" mod)
11+
$cx-tab-mods: cx-deep-map-merge(
12+
$cx-tab-mods,
13+
(
14+
code: map.get($cx-tab-mods, "line"),
15+
)
16+
) !default;
17+
18+
// Disable link styles from theme
19+
$cx-link-state-style-map: () !default;

‎docs/variables.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@use "sass:math";
2+
@use "sass:map";
3+
@use "sass:color";
4+
5+
// Load misc variables first
6+
@use "../misc/variables" as misc;
7+
8+
// Forward theme variables with docs-specific overrides
9+
@forward "cx-theme-aquamarine/src/variables" with (
10+
$cx-theme-primary-color: #017be6 !default
11+
);
12+
13+
// Use variables locally
14+
@use "cx-theme-aquamarine/src/variables" as *;
15+
16+
// Re-export misc variables
17+
@forward "../misc/variables";
18+
19+
// Helper function
20+
@function cx-divide($a, $b) {
21+
@return math.div($a, $b);
22+
}

‎meta/MODERN_SASS.md‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,22 @@ This document outlines the strategy for modernizing CxJS Sass files to use moder
1919

2020
### Progress Summary
2121

22-
The migration is approximately **60% complete**:
22+
The migration is approximately **70% complete**:
2323

2424
| Component | Status | Notes |
2525
|-----------|--------|-------|
2626
| Core framework (`packages/cx/src/`) | ✅ Complete | All files use `@use`/`@forward` |
27-
| cx-theme-aquamarine | ✅ Complete | Fully modernized |
27+
| cx-theme-aquamarine | ✅ Complete | Fully modernized with `sass:color` functions |
28+
| misc/ | ✅ Complete | Shared layout/component styles use `@use`/`@forward` |
29+
| docs/ | ✅ Complete | Uses modern Sass patterns |
2830
| cx-theme-dark | ❌ Pending | Uses `@import` |
2931
| cx-theme-frost | ❌ Pending | Uses `@import` |
3032
| cx-theme-material | ❌ Pending | Uses `@import` |
3133
| cx-theme-material-dark | ❌ Pending | Uses `@import` |
3234
| cx-theme-packed-dark | ❌ Pending | Uses `@import` (most complex) |
3335
| cx-theme-space-blue | ❌ Pending | Uses `@import` |
3436
| Gallery themes | ❌ Pending | Uses `@import` |
35-
| Docs/litmus/fiddle | ❌ Pending | Uses `@import` |
37+
| litmus/fiddle | ❌ Pending | Uses `@import` |
3638

3739
### Files Changed (153 total)
3840

@@ -643,10 +645,11 @@ The build must be verified incrementally, starting with the simplest project and
643645
- [x] Verify homedocs runs correctly
644646
- Note: `@import` is kept in `global.scss` for styles inside `@layer` blocks (Sass limitation)
645647

646-
#### Step 3: docs (uses cx-theme-aquamarine)
647-
- [ ] Verify cx-theme-aquamarine compiles correctly
648-
- [ ] Fix `docs/index.scss` and related files
649-
- [ ] Verify `yarn docs` runs correctly
648+
#### Step 3: docs (uses cx-theme-aquamarine) ✅
649+
- [x] Verify cx-theme-aquamarine compiles correctly
650+
- [x] Fix `docs/index.scss` and related files
651+
- [x] Fix `misc/` shared styles (layout, components)
652+
- [x] Verify `yarn docs` runs correctly (webpack build succeeds)
650653
- [ ] Test all documentation pages render properly
651654

652655
#### Step 4: gallery (all themes)
@@ -666,7 +669,7 @@ The build must be verified incrementally, starting with the simplest project and
666669

667670
Theme packages will be converted as needed during Phase 2 (gallery step).
668671

669-
- [x] cx-theme-aquamarine
672+
- [x] cx-theme-aquamarine (fully modernized with `sass:color` functions)
670673
- [ ] cx-theme-dark
671674
- [ ] Convert `index.scss`
672675
- [ ] Convert `variables.scss`

‎misc/components/SideNav.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
$master-sidenav-link-color: #718096;
2-
$master-sidenav-active-link-color: #666;
1+
@use "./variables" as *;
32

43
.sidenav {
54
font-family: sans-serif;

‎misc/components/index.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
$sidenav-width: 250px;
2-
3-
@import 'SideNav';
4-
@import 'Animicon';
5-
@import 'util';
1+
@use "./variables" as *;
2+
@use "SideNav";
3+
@use "Animicon";
4+
@use "util";

0 commit comments

Comments
 (0)