Skip to content

Commit 095ae97

Browse files
mlaursenmlaursen
committed
chore(docs): Updated sandboxes for new Sass module system
1 parent 68e8c6b commit 095ae97

File tree

10 files changed

+32
-56
lines changed

10 files changed

+32
-56
lines changed

‎packages/dev-utils/src/sandbox/constants.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,17 +82,17 @@ export const DEMO_INDEX_HTML = `<!DOCTYPE html>
8282
</html>
8383
`;
8484

85-
export const VARIABLES_SCSS_FILE = `@import "@react-md/theme/dist/color-palette";
86-
87-
$rmd-theme-light: true;
88-
$rmd-theme-primary: $rmd-teal-500;
89-
$rmd-theme-secondary: $rmd-pink-a-200;
85+
export const EVERYTHING_SCSS_FILE = `@use "@react-md/theme/dist/color-palette" as *;
86+
@forward "react-md" with (
87+
$rmd-theme-light: true,
88+
$rmd-theme-primary: $rmd-teal-500,
89+
$rmd-theme-secondary: $rmd-pink-a-200,
90+
);
9091
`;
9192

92-
export const STYLES_SCSS_FILE = `@import "./variables";
93-
@import "react-md/dist/everything";
93+
export const STYLES_SCSS_FILE = `@use "./everything" as *;
9494
95-
@include react-md-utils";
95+
@include react-md-utils;
9696
`;
9797

9898
export const PHONE_INDEX_FILE = `export { default } from "./Phone";

‎packages/dev-utils/src/sandbox/createSandbox.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
FORM_PARTS,
1414
SANDBOXES_PATH,
1515
STYLES_SCSS_FILE,
16-
VARIABLES_SCSS_FILE,
16+
EVERYTHING_SCSS_FILE,
1717
} from "./constants";
1818
import { createPackageJson } from "./createPackageJson";
1919
import { getAllDependencies } from "./getAllDependencies";
@@ -159,8 +159,8 @@ export function createSandbox(
159159
"src/styles.scss": {
160160
content: STYLES_SCSS_FILE,
161161
},
162-
"src/_variables.scss": {
163-
content: VARIABLES_SCSS_FILE,
162+
"src/_everything.scss": {
163+
content: EVERYTHING_SCSS_FILE,
164164
},
165165
"package.json": createPackageJson({
166166
demoTitle,

‎packages/documentation/next-env.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/types/global" />
33
/// <reference types="next/image-types/global" />
4+
5+
// NOTE: This file should not be edited
6+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎packages/documentation/package.json

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,39 +20,6 @@
2020
},
2121
"license": "MIT",
2222
"dependencies": {
23-
"@react-md/alert": "^2.9.1",
24-
"@react-md/app-bar": "^2.9.1",
25-
"@react-md/autocomplete": "^2.9.1",
26-
"@react-md/avatar": "^2.9.1",
27-
"@react-md/badge": "^2.9.1",
28-
"@react-md/button": "^2.9.1",
29-
"@react-md/card": "^2.9.1",
30-
"@react-md/chip": "^2.9.1",
31-
"@react-md/dialog": "^2.9.1",
32-
"@react-md/divider": "^2.9.1",
33-
"@react-md/elevation": "^2.9.1",
34-
"@react-md/expansion-panel": "^2.9.1",
35-
"@react-md/form": "^2.9.1",
36-
"@react-md/icon": "^2.9.1",
37-
"@react-md/layout": "^2.9.1",
38-
"@react-md/link": "^2.9.1",
39-
"@react-md/list": "^2.9.1",
40-
"@react-md/material-icons": "^2.9.1",
41-
"@react-md/media": "^2.9.1",
42-
"@react-md/menu": "^2.9.1",
43-
"@react-md/overlay": "^2.9.1",
44-
"@react-md/portal": "^2.9.1",
45-
"@react-md/progress": "^2.9.1",
46-
"@react-md/sheet": "^2.9.1",
47-
"@react-md/states": "^2.9.1",
48-
"@react-md/table": "^2.9.1",
49-
"@react-md/tabs": "^2.9.1",
50-
"@react-md/theme": "^2.9.1",
51-
"@react-md/tooltip": "^2.9.1",
52-
"@react-md/transition": "^2.9.1",
53-
"@react-md/tree": "^2.9.1",
54-
"@react-md/typography": "^2.9.1",
55-
"@react-md/utils": "^2.9.1",
5623
"classnames": "^2.3.1",
5724
"codesandbox": "^2.2.3",
5825
"date-fns": "^2.23.0",
@@ -68,6 +35,7 @@
6835
"qs": "^6.10.0",
6936
"react": "^17.0.2",
7037
"react-dom": "^17.0.1",
38+
"react-md": "^2.9.1",
7139
"react-hook-form": "^7.12.2",
7240
"react-router-dom": "^5.2.0",
7341
"react-swipeable": "^6.1.2",

‎packages/documentation/src/components/ColorsAndTheming/ThemeBuilder/ThemeUsage.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ export default function ThemeUsage({
3333
{`##### SCSS Usage<!-- no-margin-bottom -->
3434
3535
\`\`\`scss
36-
@use '@react-md/theme/dist/color-palette' as *;
36+
// Note: have to rename to color since react-md also exports these variables which causes an error
37+
@use '@react-md/theme/dist/color-palette' as color;
3738
@use 'react-md' as * with (
3839
$rmd-theme-light: ${theme === "light"},
39-
$rmd-theme-primary: $rmd-${primary}-500,
40-
$rmd-theme-secondary: $rmd-${secondary}-a-${accent},
40+
$rmd-theme-primary: color.$rmd-${primary}-500,
41+
$rmd-theme-secondary: color.$rmd-${secondary}-a-${accent},
4142
// other variable overrides
4243
);
4344

‎packages/documentation/src/components/Demos/Theme/SimpleExample.module.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// sass-lint:disable class-name-format
2-
@use '@react-md/theme/dist/color-palette' as *;
2+
@use '@react-md/theme/dist/color-palette' as color;
33
@use 'react-md' as * with (
4-
$rmd-theme-primary: $rmd-teal-500,
5-
$rmd-theme-secondary: $rmd-pink-a-200,
4+
$rmd-theme-primary: color.$rmd-teal-500,
5+
$rmd-theme-secondary: color.$rmd-pink-a-200,
66
);
77

88
.container {

‎packages/documentation/src/components/NotFoundPage/NotFoundPage.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../../everything';
1+
@use '../../everything' as *;
22

33
.container {
44
background-color: rmd-theme-get-swatch($rmd-theme-primary, 800);

‎packages/documentation/src/components/NotFoundPage/NotFoundSVG.module.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
@use '../../everything';
1+
@use '../../everything' as *;
22

33
.oval {
44
@include rmd-theme(fill, secondary);
55
}
66

77
.circle1 {
8-
fill: rmd-theme-get-swatch(variables.$primary-color, 700);
8+
fill: rmd-theme-get-swatch($rmd-theme-primary, 700);
99
}
1010

1111
.circle2 {
12-
fill: rmd-theme-get-swatch(variables.$primary-color, 600);
12+
fill: rmd-theme-get-swatch($rmd-theme-primary, 600);
1313
}
1414

1515
.circle3 {

‎packages/documentation/src/utils/getSandbox.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ function getVersion(packageName: string): string {
1919
return "latest";
2020
}
2121

22+
if (name.includes("react-md")) {
23+
return RMD_VERSION;
24+
}
25+
2226
const version = versions[name];
2327
if (!versions[name]) {
2428
throw new Error(`${name} does not have a version available`);
@@ -67,7 +71,7 @@ export default function getSandbox(
6771
content = content
6872
.replace(/{{RMD_VERSION}}/g, RMD_VERSION)
6973
.replace(/{{THEME}}/g, theme);
70-
if (theme === "dark" && fileName === "src/_variables.scss") {
74+
if (theme === "dark" && fileName === "src/_everything.scss") {
7175
content = content.replace(
7276
"$rmd-theme-light: true",
7377
"$rmd-theme-light: false"

‎packages/react-md/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ Next, create a `src/App.scss` file to include all the `react-md` styles and
130130
import the `App.scss` file in the `src/App.js`:
131131

132132
```scss
133-
@import "react-md/dist/react-md";
133+
@use "react-md" as *;
134134

135135
// this will include all the styles from react-md
136136
@include react-md-utils;

0 commit comments

Comments
 (0)