Skip to content

Commit 7ee8a32

Browse files
brandyscarneybrandyscarney
authored
feat(playground): pass the variables theming file to StackBlitz (#2602)
1 parent 4d252d7 commit 7ee8a32

File tree

11 files changed

+1001
-14
lines changed

11 files changed

+1001
-14
lines changed

‎src/components/global/Playground/stackblitz.utils.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@ const loadSourceFiles = async (files: string[]) => {
4040
}
4141

4242
const openHtmlEditor = async (code: string, options?: EditorOptions) => {
43-
const [index_ts, index_html] = await loadSourceFiles([
43+
const [index_ts, index_html, variables_css] = await loadSourceFiles([
4444
'html/index.ts',
4545
options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
46+
'html/variables.css'
4647
]);
4748

4849
sdk.openProject({
@@ -52,6 +53,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
5253
files: {
5354
'index.html': index_html.replace(/{{ TEMPLATE }}/g, code),
5455
'index.ts': index_ts,
56+
'theme/variables.css': variables_css,
5557
...options?.files
5658
},
5759
dependencies: {
@@ -61,7 +63,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
6163
}
6264

6365
const openAngularEditor = async (code: string, options?: EditorOptions) => {
64-
let [main_ts, app_module_ts, app_component_ts, app_component_css, app_component_html, example_component_ts, styles_css, global_css, angular_json, tsconfig_json] = await loadSourceFiles([
66+
let [main_ts, app_module_ts, app_component_ts, app_component_css, app_component_html, example_component_ts, styles_css, global_css, variables_css, angular_json, tsconfig_json] = await loadSourceFiles([
6567
'angular/main.ts',
6668
'angular/app.module.ts',
6769
'angular/app.component.ts',
@@ -70,6 +72,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
7072
'angular/example.component.ts',
7173
'angular/styles.css',
7274
'angular/global.css',
75+
'angular/variables.css',
7376
'angular/angular.json',
7477
'angular/tsconfig.json'
7578
])
@@ -100,6 +103,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
100103
'src/index.html': '<app-root></app-root>',
101104
'src/styles.css': styles_css,
102105
'src/global.css': global_css,
106+
'src/theme/variables.css': variables_css,
103107
'angular.json': angular_json,
104108
'tsconfig.json': tsconfig_json,
105109
...options?.files
@@ -119,9 +123,10 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
119123
}
120124

121125
const openReactEditor = async (code: string, options?: EditorOptions) => {
122-
const [index_tsx, app_tsx, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
126+
const [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json] = await loadSourceFiles([
123127
'react/index.tsx',
124128
options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
129+
'react/variables.css',
125130
'react/tsconfig.json',
126131
'react/package.json',
127132
'react/package-lock.json'
@@ -136,6 +141,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
136141
'src/index.tsx': index_tsx,
137142
'src/App.tsx': app_tsx,
138143
'src/main.tsx': code,
144+
'src/theme/variables.css': variables_css,
139145
'tsconfig.json': ts_config_json,
140146
'package.json': package_json,
141147
'package-lock.json': package_lock_json,
@@ -148,10 +154,11 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
148154
}
149155

150156
const openVueEditor = async (code: string, options?: EditorOptions) => {
151-
const [package_json, package_lock_json, index_html, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
157+
const [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
152158
'vue/package.json',
153159
'vue/package-lock.json',
154160
'vue/index.html',
161+
'vue/variables.css',
155162
'vue/vite.config.ts',
156163
'vue/main.ts',
157164
options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue',
@@ -174,6 +181,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
174181
'src/components/Example.vue': code,
175182
'src/main.ts': main_ts,
176183
'src/env.d.ts': env_d_ts,
184+
'src/theme/variables.css': variables_css,
177185
'index.html': index_html,
178186
'vite.config.ts': vite_config_ts,
179187
'package.json': package_json,

‎static/code/stackblitz/angular/angular.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"polyfills": "src/polyfills.ts",
2020
"tsConfig": "src/tsconfig.app.json",
2121
"assets": ["src/favicon.ico", "src/assets"],
22-
"styles": ["src/styles.css", "src/global.css"],
22+
"styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
2323
"scripts": []
2424
},
2525
"configurations": {

‎static/code/stackblitz/angular/styles.css

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
1+
/*
2+
* App Global CSS
3+
* ----------------------------------------------------------------------------
4+
* Put style rules here that you want to apply globally. These styles are for
5+
* the entire app and not just one component. Additionally, this file can be
6+
* used as an entry point to import other CSS/Sass files to be included in the
7+
* output CSS.
8+
* For more information on global stylesheets, visit the documentation:
9+
* https://ionicframework.com/docs/layout/global-stylesheets
10+
*/
11+
112
/* Core CSS required for Ionic components to work properly */
2-
@import '~@ionic/angular/css/core.css';
13+
@import "~@ionic/angular/css/core.css";
14+
315
/* Basic CSS for apps built with Ionic */
4-
@import '~@ionic/angular/css/normalize.css';
5-
@import '~@ionic/angular/css/structure.css';
6-
@import '~@ionic/angular/css/typography.css';
16+
@import "~@ionic/angular/css/normalize.css";
17+
@import "~@ionic/angular/css/structure.css";
18+
@import "~@ionic/angular/css/typography.css";
19+
720
/* Optional CSS utils that can be commented out */
8-
@import '~@ionic/angular/css/padding.css';
9-
@import '~@ionic/angular/css/float-elements.css';
10-
@import '~@ionic/angular/css/text-alignment.css';
11-
@import '~@ionic/angular/css/text-transformation.css';
12-
@import '~@ionic/angular/css/flex-utils.css';
21+
@import "~@ionic/angular/css/padding.css";
22+
@import "~@ionic/angular/css/float-elements.css";
23+
@import "~@ionic/angular/css/text-alignment.css";
24+
@import "~@ionic/angular/css/text-transformation.css";
25+
@import "~@ionic/angular/css/flex-utils.css";
26+
@import "~@ionic/angular/css/display.css";

‎static/code/stackblitz/angular/variables.css

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
/* Ionic Variables and Theming. For more info, please see:
2+
http://ionicframework.com/docs/theming/ */
3+
4+
/** Ionic CSS Variables **/
5+
:root {
6+
/** primary **/
7+
--ion-color-primary: #3880ff;
8+
--ion-color-primary-rgb: 56, 128, 255;
9+
--ion-color-primary-contrast: #ffffff;
10+
--ion-color-primary-contrast-rgb: 255, 255, 255;
11+
--ion-color-primary-shade: #3171e0;
12+
--ion-color-primary-tint: #4c8dff;
13+
14+
/** secondary **/
15+
--ion-color-secondary: #3dc2ff;
16+
--ion-color-secondary-rgb: 61, 194, 255;
17+
--ion-color-secondary-contrast: #ffffff;
18+
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19+
--ion-color-secondary-shade: #36abe0;
20+
--ion-color-secondary-tint: #50c8ff;
21+
22+
/** tertiary **/
23+
--ion-color-tertiary: #5260ff;
24+
--ion-color-tertiary-rgb: 82, 96, 255;
25+
--ion-color-tertiary-contrast: #ffffff;
26+
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27+
--ion-color-tertiary-shade: #4854e0;
28+
--ion-color-tertiary-tint: #6370ff;
29+
30+
/** success **/
31+
--ion-color-success: #2dd36f;
32+
--ion-color-success-rgb: 45, 211, 111;
33+
--ion-color-success-contrast: #ffffff;
34+
--ion-color-success-contrast-rgb: 255, 255, 255;
35+
--ion-color-success-shade: #28ba62;
36+
--ion-color-success-tint: #42d77d;
37+
38+
/** warning **/
39+
--ion-color-warning: #ffc409;
40+
--ion-color-warning-rgb: 255, 196, 9;
41+
--ion-color-warning-contrast: #000000;
42+
--ion-color-warning-contrast-rgb: 0, 0, 0;
43+
--ion-color-warning-shade: #e0ac08;
44+
--ion-color-warning-tint: #ffca22;
45+
46+
/** danger **/
47+
--ion-color-danger: #eb445a;
48+
--ion-color-danger-rgb: 235, 68, 90;
49+
--ion-color-danger-contrast: #ffffff;
50+
--ion-color-danger-contrast-rgb: 255, 255, 255;
51+
--ion-color-danger-shade: #cf3c4f;
52+
--ion-color-danger-tint: #ed576b;
53+
54+
/** dark **/
55+
--ion-color-dark: #222428;
56+
--ion-color-dark-rgb: 34, 36, 40;
57+
--ion-color-dark-contrast: #ffffff;
58+
--ion-color-dark-contrast-rgb: 255, 255, 255;
59+
--ion-color-dark-shade: #1e2023;
60+
--ion-color-dark-tint: #383a3e;
61+
62+
/** medium **/
63+
--ion-color-medium: #92949c;
64+
--ion-color-medium-rgb: 146, 148, 156;
65+
--ion-color-medium-contrast: #ffffff;
66+
--ion-color-medium-contrast-rgb: 255, 255, 255;
67+
--ion-color-medium-shade: #808289;
68+
--ion-color-medium-tint: #9d9fa6;
69+
70+
/** light **/
71+
--ion-color-light: #f4f5f8;
72+
--ion-color-light-rgb: 244, 245, 248;
73+
--ion-color-light-contrast: #000000;
74+
--ion-color-light-contrast-rgb: 0, 0, 0;
75+
--ion-color-light-shade: #d7d8da;
76+
--ion-color-light-tint: #f5f6f9;
77+
}
78+
79+
@media (prefers-color-scheme: dark) {
80+
/*
81+
* Dark Colors
82+
* -------------------------------------------
83+
*/
84+
85+
body {
86+
--ion-color-primary: #428cff;
87+
--ion-color-primary-rgb: 66,140,255;
88+
--ion-color-primary-contrast: #ffffff;
89+
--ion-color-primary-contrast-rgb: 255,255,255;
90+
--ion-color-primary-shade: #3a7be0;
91+
--ion-color-primary-tint: #5598ff;
92+
93+
--ion-color-secondary: #50c8ff;
94+
--ion-color-secondary-rgb: 80,200,255;
95+
--ion-color-secondary-contrast: #ffffff;
96+
--ion-color-secondary-contrast-rgb: 255,255,255;
97+
--ion-color-secondary-shade: #46b0e0;
98+
--ion-color-secondary-tint: #62ceff;
99+
100+
--ion-color-tertiary: #6a64ff;
101+
--ion-color-tertiary-rgb: 106,100,255;
102+
--ion-color-tertiary-contrast: #ffffff;
103+
--ion-color-tertiary-contrast-rgb: 255,255,255;
104+
--ion-color-tertiary-shade: #5d58e0;
105+
--ion-color-tertiary-tint: #7974ff;
106+
107+
--ion-color-success: #2fdf75;
108+
--ion-color-success-rgb: 47,223,117;
109+
--ion-color-success-contrast: #000000;
110+
--ion-color-success-contrast-rgb: 0,0,0;
111+
--ion-color-success-shade: #29c467;
112+
--ion-color-success-tint: #44e283;
113+
114+
--ion-color-warning: #ffd534;
115+
--ion-color-warning-rgb: 255,213,52;
116+
--ion-color-warning-contrast: #000000;
117+
--ion-color-warning-contrast-rgb: 0,0,0;
118+
--ion-color-warning-shade: #e0bb2e;
119+
--ion-color-warning-tint: #ffd948;
120+
121+
--ion-color-danger: #ff4961;
122+
--ion-color-danger-rgb: 255,73,97;
123+
--ion-color-danger-contrast: #ffffff;
124+
--ion-color-danger-contrast-rgb: 255,255,255;
125+
--ion-color-danger-shade: #e04055;
126+
--ion-color-danger-tint: #ff5b71;
127+
128+
--ion-color-dark: #f4f5f8;
129+
--ion-color-dark-rgb: 244,245,248;
130+
--ion-color-dark-contrast: #000000;
131+
--ion-color-dark-contrast-rgb: 0,0,0;
132+
--ion-color-dark-shade: #d7d8da;
133+
--ion-color-dark-tint: #f5f6f9;
134+
135+
--ion-color-medium: #989aa2;
136+
--ion-color-medium-rgb: 152,154,162;
137+
--ion-color-medium-contrast: #000000;
138+
--ion-color-medium-contrast-rgb: 0,0,0;
139+
--ion-color-medium-shade: #86888f;
140+
--ion-color-medium-tint: #a2a4ab;
141+
142+
--ion-color-light: #222428;
143+
--ion-color-light-rgb: 34,36,40;
144+
--ion-color-light-contrast: #ffffff;
145+
--ion-color-light-contrast-rgb: 255,255,255;
146+
--ion-color-light-shade: #1e2023;
147+
--ion-color-light-tint: #383a3e;
148+
}
149+
150+
/*
151+
* iOS Dark Theme
152+
* -------------------------------------------
153+
*/
154+
155+
.ios body {
156+
--ion-background-color: #000000;
157+
--ion-background-color-rgb: 0,0,0;
158+
159+
--ion-text-color: #ffffff;
160+
--ion-text-color-rgb: 255,255,255;
161+
162+
--ion-color-step-50: #0d0d0d;
163+
--ion-color-step-100: #1a1a1a;
164+
--ion-color-step-150: #262626;
165+
--ion-color-step-200: #333333;
166+
--ion-color-step-250: #404040;
167+
--ion-color-step-300: #4d4d4d;
168+
--ion-color-step-350: #595959;
169+
--ion-color-step-400: #666666;
170+
--ion-color-step-450: #737373;
171+
--ion-color-step-500: #808080;
172+
--ion-color-step-550: #8c8c8c;
173+
--ion-color-step-600: #999999;
174+
--ion-color-step-650: #a6a6a6;
175+
--ion-color-step-700: #b3b3b3;
176+
--ion-color-step-750: #bfbfbf;
177+
--ion-color-step-800: #cccccc;
178+
--ion-color-step-850: #d9d9d9;
179+
--ion-color-step-900: #e6e6e6;
180+
--ion-color-step-950: #f2f2f2;
181+
182+
--ion-item-background: #000000;
183+
184+
--ion-card-background: #1c1c1d;
185+
}
186+
187+
.ios ion-modal {
188+
--ion-background-color: var(--ion-color-step-100);
189+
--ion-toolbar-background: var(--ion-color-step-150);
190+
--ion-toolbar-border-color: var(--ion-color-step-250);
191+
}
192+
193+
194+
/*
195+
* Material Design Dark Theme
196+
* -------------------------------------------
197+
*/
198+
199+
.md body {
200+
--ion-background-color: #121212;
201+
--ion-background-color-rgb: 18,18,18;
202+
203+
--ion-text-color: #ffffff;
204+
--ion-text-color-rgb: 255,255,255;
205+
206+
--ion-border-color: #222222;
207+
208+
--ion-color-step-50: #1e1e1e;
209+
--ion-color-step-100: #2a2a2a;
210+
--ion-color-step-150: #363636;
211+
--ion-color-step-200: #414141;
212+
--ion-color-step-250: #4d4d4d;
213+
--ion-color-step-300: #595959;
214+
--ion-color-step-350: #656565;
215+
--ion-color-step-400: #717171;
216+
--ion-color-step-450: #7d7d7d;
217+
--ion-color-step-500: #898989;
218+
--ion-color-step-550: #949494;
219+
--ion-color-step-600: #a0a0a0;
220+
--ion-color-step-650: #acacac;
221+
--ion-color-step-700: #b8b8b8;
222+
--ion-color-step-750: #c4c4c4;
223+
--ion-color-step-800: #d0d0d0;
224+
--ion-color-step-850: #dbdbdb;
225+
--ion-color-step-900: #e7e7e7;
226+
--ion-color-step-950: #f3f3f3;
227+
228+
--ion-item-background: #1e1e1e;
229+
230+
--ion-toolbar-background: #1f1f1f;
231+
232+
--ion-tab-bar-background: #1f1f1f;
233+
234+
--ion-card-background: #1e1e1e;
235+
}
236+
}

‎static/code/stackblitz/html/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import '@ionic/core/css/float-elements.css';
1616
import '@ionic/core/css/text-alignment.css';
1717
import '@ionic/core/css/text-transformation.css';
1818
import '@ionic/core/css/flex-utils.css';
19+
import '@ionic/core/css/display.css';
20+
21+
/* Theme variables */
22+
import './theme/variables.css';
1923

2024
defineCustomElements();
2125

0 commit comments

Comments
 (0)