From 68be867c018509f7a9cc581e7dc0c9e56cdffc29 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 13:37:02 -0600 Subject: [PATCH 1/8] make changes for Angular --- .../code/stackblitz/v8/angular/package.json | 4 +- static/code/stackblitz/v8/angular/styles.css | 11 ++ .../code/stackblitz/v8/angular/variables.css | 159 ------------------ 3 files changed, 13 insertions(+), 161 deletions(-) diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index 4464f56a2a1..75a3df2aecf 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -1,7 +1,7 @@ { "dependencies": { - "@ionic/angular": "7.5.8-dev.11702398696.1ab62ea9", - "@ionic/core": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/angular": "7.6.2-dev.11704729332.13b412c8", + "@ionic/core": "7.6.2-dev.11704729332.13b412c8", "@angular/platform-browser-dynamic": "17.0.4" } } diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css index 463c50148fb..d34e7fd4b2c 100644 --- a/static/code/stackblitz/v8/angular/styles.css +++ b/static/code/stackblitz/v8/angular/styles.css @@ -24,3 +24,14 @@ @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; @import "~@ionic/angular/css/display.css"; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import "~@ionic/angular/css/themes/dark.always.css"; */ +/* @import "~@ionic/angular/css/themes/dark.class.css"; */ +@import "~@ionic/angular/css/themes/dark.system.css"; diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css index a44fcdd01d7..51bc3de8002 100644 --- a/static/code/stackblitz/v8/angular/variables.css +++ b/static/code/stackblitz/v8/angular/variables.css @@ -75,162 +75,3 @@ http://ionicframework.com/docs/theming/ */ --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; } - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} From cb0cddf69a00f01490a552d9e798eb5b06fbe1b7 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 13:42:03 -0600 Subject: [PATCH 2/8] make changes for JS --- static/code/stackblitz/v8/html/index.ts | 11 ++ static/code/stackblitz/v8/html/package.json | 2 +- static/code/stackblitz/v8/html/variables.css | 159 ------------------- 3 files changed, 12 insertions(+), 160 deletions(-) diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts index 2cc510047cd..53aaabfacea 100644 --- a/static/code/stackblitz/v8/html/index.ts +++ b/static/code/stackblitz/v8/html/index.ts @@ -21,6 +21,17 @@ import '@ionic/core/css/display.css'; /* Theme variables */ import './theme/variables.css'; +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import "@ionic/core/css/themes/dark.always.css"; +// import "@ionic/core/css/themes/dark.class.css"; +import "@ionic/core/css/themes/dark.system.css"; + defineCustomElements(); (window as any).loadingController = loadingController; diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index 1bf33becc86..7f4878800b3 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "@ionic/core": "7.5.8-dev.11702398696.1ab62ea9" + "@ionic/core": "7.6.2-dev.11704729332.13b412c8" } } diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css index a44fcdd01d7..51bc3de8002 100644 --- a/static/code/stackblitz/v8/html/variables.css +++ b/static/code/stackblitz/v8/html/variables.css @@ -75,162 +75,3 @@ http://ionicframework.com/docs/theming/ */ --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; } - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} From a18a9d05ce40b910d15d6097ddf6ce9d07b1c5d5 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 13:44:16 -0600 Subject: [PATCH 3/8] make JS quotes consistent --- static/code/stackblitz/v8/html/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts index 53aaabfacea..24e443de622 100644 --- a/static/code/stackblitz/v8/html/index.ts +++ b/static/code/stackblitz/v8/html/index.ts @@ -28,9 +28,9 @@ import './theme/variables.css'; * https://ionicframework.com/docs/theming/dark-mode */ -// import "@ionic/core/css/themes/dark.always.css"; -// import "@ionic/core/css/themes/dark.class.css"; -import "@ionic/core/css/themes/dark.system.css"; +// import '@ionic/core/css/themes/dark.always.css'; +// import '@ionic/core/css/themes/dark.class.css'; +import '@ionic/core/css/themes/dark.system.css'; defineCustomElements(); From 5207321e29f0b10caee82714db80386ac0347ea6 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 13:47:38 -0600 Subject: [PATCH 4/8] make changes for React --- static/code/stackblitz/v8/react/app.tsx | 11 ++ .../stackblitz/v8/react/app.withContent.tsx | 11 ++ static/code/stackblitz/v8/react/package.json | 4 +- static/code/stackblitz/v8/react/variables.css | 159 ------------------ 4 files changed, 24 insertions(+), 161 deletions(-) diff --git a/static/code/stackblitz/v8/react/app.tsx b/static/code/stackblitz/v8/react/app.tsx index 7ba9c8b93c7..5340400e43c 100644 --- a/static/code/stackblitz/v8/react/app.tsx +++ b/static/code/stackblitz/v8/react/app.tsx @@ -20,6 +20,17 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/themes/dark.always.css'; +// import '@ionic/react/css/themes/dark.class.css'; +import '@ionic/react/css/themes/dark.system.css'; + import Example from './main'; setupIonicReact(); diff --git a/static/code/stackblitz/v8/react/app.withContent.tsx b/static/code/stackblitz/v8/react/app.withContent.tsx index d90d8f74ffe..38954f5e6fb 100644 --- a/static/code/stackblitz/v8/react/app.withContent.tsx +++ b/static/code/stackblitz/v8/react/app.withContent.tsx @@ -20,6 +20,17 @@ import '@ionic/react/css/display.css'; /* Theme variables */ import './theme/variables.css'; +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/themes/dark.always.css'; +// import '@ionic/react/css/themes/dark.class.css'; +import '@ionic/react/css/themes/dark.system.css'; + import Example from './main'; setupIonicReact(); diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index 0ad197b658b..a7dc2cf7201 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "7.5.8-dev.11702398696.1ab62ea9", - "@ionic/react-router": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/react": "7.6.2-dev.11704729332.13b412c8", + "@ionic/react-router": "7.6.2-dev.11704729332.13b412c8", "@types/node": "^20.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css index a44fcdd01d7..51bc3de8002 100644 --- a/static/code/stackblitz/v8/react/variables.css +++ b/static/code/stackblitz/v8/react/variables.css @@ -75,162 +75,3 @@ http://ionicframework.com/docs/theming/ */ --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; } - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} From 6d747dc8c0b33affa54dd98799cabaa14c273d33 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 13:50:07 -0600 Subject: [PATCH 5/8] make changes for Vue --- static/code/stackblitz/v8/vue/main.ts | 11 ++ static/code/stackblitz/v8/vue/package.json | 4 +- static/code/stackblitz/v8/vue/variables.css | 159 -------------------- 3 files changed, 13 insertions(+), 161 deletions(-) diff --git a/static/code/stackblitz/v8/vue/main.ts b/static/code/stackblitz/v8/vue/main.ts index 207b1ad84c6..e3edf08b891 100644 --- a/static/code/stackblitz/v8/vue/main.ts +++ b/static/code/stackblitz/v8/vue/main.ts @@ -22,4 +22,15 @@ import '@ionic/vue/css/display.css'; /* Theme variables */ import './theme/variables.css'; +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/themes/dark.always.css'; +// import '@ionic/vue/css/themes/dark.class.css'; +import '@ionic/vue/css/themes/dark.system.css'; + createApp(App).use(IonicVue).mount('#app'); diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index 70b2438b7b2..9ca908c9f2f 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "7.5.8-dev.11702398696.1ab62ea9", - "@ionic/vue-router": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/vue": "7.6.2-dev.11704729332.13b412c8", + "@ionic/vue-router": "7.6.2-dev.11704729332.13b412c8", "vue": "^3.2.25", "vue-router": "4.2.5" }, diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css index a44fcdd01d7..51bc3de8002 100644 --- a/static/code/stackblitz/v8/vue/variables.css +++ b/static/code/stackblitz/v8/vue/variables.css @@ -75,162 +75,3 @@ http://ionicframework.com/docs/theming/ */ --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; } - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} From 2aa492310af757cdce051958970be5175ed6e041 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 12 Jan 2024 12:15:57 -0600 Subject: [PATCH 6/8] update React/Vue lockfiles --- .../stackblitz/v8/react/package-lock.json | 76 +++++++++---------- .../code/stackblitz/v8/vue/package-lock.json | 76 +++++++++---------- 2 files changed, 76 insertions(+), 76 deletions(-) diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index a4068fb1f38..0002818b05b 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "7.5.8-dev.11702398696.1ab62ea9", - "@ionic/react-router": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/react": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/react-router": "7.6.2-dev.11704998705.1e1f9850", "@types/node": "^20.0.0", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", @@ -683,21 +683,21 @@ } }, "node_modules/@ionic/core": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-O1xlUFj0iLJNqj0Rrnl4jzusnzkP1zGwfXC9Z6PdQMPZv6Av+r5nZGH/qRZZSCuqvgcexRrBsCJZtzHbj24npQ==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", "dependencies": { - "@stencil/core": "^4.8.1", + "@stencil/core": "^4.8.2", "ionicons": "^7.2.1", "tslib": "^2.1.0" } }, "node_modules/@ionic/react": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-HqtCE4zYtsYVXmcy4t49GINQs5Ltsf/h5DMwlmxVsiCGRzVfzmgdbUDYCsQpgD8ssDrMgTPpq9XmNAQn5hO+gg==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-sX2BIPGAZPuiyyCkVfOQHTVS1uZrbSBYlkB4sZ8OsosFNvF7cS+lPn74lsmGvFiBEPjk93Un/o86fR2uIfvGvg==", "dependencies": { - "@ionic/core": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", "ionicons": "^7.0.0", "tslib": "*" }, @@ -707,11 +707,11 @@ } }, "node_modules/@ionic/react-router": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-sRcKasDbcwqtNAWS5HjsTP1uWi61tz7EBKelnkRNfyA0W9eZcYYRtAHiv5h3JfAnlkxBCTc7/UGHUWHGyQ0wpQ==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-06UgqqhgPUV55ekLOWvafEWjXeMXTsmQAnFoGntqTPXeWWeMd9zO4B4DD6grRozkjlpxzP/2N4nzBkP7jCVAVA==", "dependencies": { - "@ionic/react": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/react": "7.6.2-dev.11704998705.1e1f9850", "tslib": "*" }, "peerDependencies": { @@ -765,9 +765,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz", - "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", + "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==", "bin": { "stencil": "bin/stencil" }, @@ -1133,9 +1133,9 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/ionicons": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz", - "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", + "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", "dependencies": { "@stencil/core": "^4.0.3" } @@ -1918,31 +1918,31 @@ "optional": true }, "@ionic/core": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-O1xlUFj0iLJNqj0Rrnl4jzusnzkP1zGwfXC9Z6PdQMPZv6Av+r5nZGH/qRZZSCuqvgcexRrBsCJZtzHbj24npQ==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", "requires": { - "@stencil/core": "^4.8.1", + "@stencil/core": "^4.8.2", "ionicons": "^7.2.1", "tslib": "^2.1.0" } }, "@ionic/react": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-HqtCE4zYtsYVXmcy4t49GINQs5Ltsf/h5DMwlmxVsiCGRzVfzmgdbUDYCsQpgD8ssDrMgTPpq9XmNAQn5hO+gg==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-sX2BIPGAZPuiyyCkVfOQHTVS1uZrbSBYlkB4sZ8OsosFNvF7cS+lPn74lsmGvFiBEPjk93Un/o86fR2uIfvGvg==", "requires": { - "@ionic/core": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", "ionicons": "^7.0.0", "tslib": "*" } }, "@ionic/react-router": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-sRcKasDbcwqtNAWS5HjsTP1uWi61tz7EBKelnkRNfyA0W9eZcYYRtAHiv5h3JfAnlkxBCTc7/UGHUWHGyQ0wpQ==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-06UgqqhgPUV55ekLOWvafEWjXeMXTsmQAnFoGntqTPXeWWeMd9zO4B4DD6grRozkjlpxzP/2N4nzBkP7jCVAVA==", "requires": { - "@ionic/react": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/react": "7.6.2-dev.11704998705.1e1f9850", "tslib": "*" } }, @@ -1981,9 +1981,9 @@ } }, "@stencil/core": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz", - "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==" + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", + "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==" }, "@types/babel__core": { "version": "7.20.4", @@ -2258,9 +2258,9 @@ } }, "ionicons": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz", - "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", + "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", "requires": { "@stencil/core": "^4.0.3" } diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json index 76f8aad9a65..6ed88d27a92 100644 --- a/static/code/stackblitz/v8/vue/package-lock.json +++ b/static/code/stackblitz/v8/vue/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "7.5.8-dev.11702398696.1ab62ea9", - "@ionic/vue-router": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/vue": "7.6.2-dev.11704998705.1e1f9850", + "@ionic/vue-router": "7.6.2-dev.11704998705.1e1f9850", "vue": "^3.2.25", "vue-router": "4.2.5" }, @@ -384,30 +384,30 @@ } }, "node_modules/@ionic/core": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-O1xlUFj0iLJNqj0Rrnl4jzusnzkP1zGwfXC9Z6PdQMPZv6Av+r5nZGH/qRZZSCuqvgcexRrBsCJZtzHbj24npQ==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", "dependencies": { - "@stencil/core": "^4.8.1", + "@stencil/core": "^4.8.2", "ionicons": "^7.2.1", "tslib": "^2.1.0" } }, "node_modules/@ionic/vue": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-4opVKKABEYJvoe15tOD8Saoq5AP136koGekoS4S56lhz6RMKHU/ccnNF48qC6fWUIXTn5QLbuViYtsI6AVgTtg==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-HCd2FBTBG3DZaYsuFMFWR54mNXNMSS4SUyxk1f6TCGu/2KlcAvyh2mWxn7DJkSNcrqhNIEB2hxwt4fjDsqVygQ==", "dependencies": { - "@ionic/core": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", "ionicons": "^7.0.0" } }, "node_modules/@ionic/vue-router": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-2ltNrWva35qb8HeT0aM2tkAlZZnu9y9PBmzOkwczxbV6D34d68vc2Yt/CJbBLv8TFiQ1t7nTs5dFnaEd5AkLVw==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-OE61CIPDYlI1Q3tK9+iqHgJn77uMP8lXkyCGonzn9OwqwgqQlzRjp70qYx4Jtfgeo7pNuHkRwYGzBHjDvPh+gA==", "dependencies": { - "@ionic/vue": "7.5.8-dev.11702398696.1ab62ea9" + "@ionic/vue": "7.6.2-dev.11704998705.1e1f9850" } }, "node_modules/@jridgewell/sourcemap-codec": { @@ -416,9 +416,9 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "node_modules/@stencil/core": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz", - "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", + "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==", "bin": { "stencil": "bin/stencil" }, @@ -698,9 +698,9 @@ } }, "node_modules/ionicons": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz", - "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", + "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", "dependencies": { "@stencil/core": "^4.0.3" } @@ -1145,30 +1145,30 @@ "optional": true }, "@ionic/core": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-O1xlUFj0iLJNqj0Rrnl4jzusnzkP1zGwfXC9Z6PdQMPZv6Av+r5nZGH/qRZZSCuqvgcexRrBsCJZtzHbj24npQ==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-/Vdrgyq8aFr68KaNrChuejCUGppj+IbwR1CmZm9/S0+w12mtCyVM5+6VVq9CLAVi0YG7m2AK2S5ENtK+hv4Ljw==", "requires": { - "@stencil/core": "^4.8.1", + "@stencil/core": "^4.8.2", "ionicons": "^7.2.1", "tslib": "^2.1.0" } }, "@ionic/vue": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-4opVKKABEYJvoe15tOD8Saoq5AP136koGekoS4S56lhz6RMKHU/ccnNF48qC6fWUIXTn5QLbuViYtsI6AVgTtg==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-HCd2FBTBG3DZaYsuFMFWR54mNXNMSS4SUyxk1f6TCGu/2KlcAvyh2mWxn7DJkSNcrqhNIEB2hxwt4fjDsqVygQ==", "requires": { - "@ionic/core": "7.5.8-dev.11702398696.1ab62ea9", + "@ionic/core": "7.6.2-dev.11704998705.1e1f9850", "ionicons": "^7.0.0" } }, "@ionic/vue-router": { - "version": "7.5.8-dev.11702398696.1ab62ea9", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.5.8-dev.11702398696.1ab62ea9.tgz", - "integrity": "sha512-2ltNrWva35qb8HeT0aM2tkAlZZnu9y9PBmzOkwczxbV6D34d68vc2Yt/CJbBLv8TFiQ1t7nTs5dFnaEd5AkLVw==", + "version": "7.6.2-dev.11704998705.1e1f9850", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.2-dev.11704998705.1e1f9850.tgz", + "integrity": "sha512-OE61CIPDYlI1Q3tK9+iqHgJn77uMP8lXkyCGonzn9OwqwgqQlzRjp70qYx4Jtfgeo7pNuHkRwYGzBHjDvPh+gA==", "requires": { - "@ionic/vue": "7.5.8-dev.11702398696.1ab62ea9" + "@ionic/vue": "7.6.2-dev.11704998705.1e1f9850" } }, "@jridgewell/sourcemap-codec": { @@ -1177,9 +1177,9 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "@stencil/core": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz", - "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==" + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", + "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==" }, "@vitejs/plugin-vue": { "version": "4.5.1", @@ -1418,9 +1418,9 @@ "dev": true }, "ionicons": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz", - "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", + "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", "requires": { "@stencil/core": "^4.0.3" } From 469fc12a5b212e249b617bee9e9e81e13d7ec4e5 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 12 Jan 2024 12:16:07 -0600 Subject: [PATCH 7/8] clear out variables.css files --- .../code/stackblitz/v8/angular/variables.css | 163 ------------------ static/code/stackblitz/v8/html/variables.css | 163 ------------------ static/code/stackblitz/v8/react/variables.css | 163 ------------------ static/code/stackblitz/v8/vue/variables.css | 163 ------------------ 4 files changed, 652 deletions(-) diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css index b4daece811d..e69de29bb2d 100644 --- a/static/code/stackblitz/v8/angular/variables.css +++ b/static/code/stackblitz/v8/angular/variables.css @@ -1,163 +0,0 @@ -/* Ionic Variables and Theming. For more info, please see: -http://ionicframework.com/docs/theming/ */ - -/** Ionic CSS Variables **/ - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css index b4daece811d..e69de29bb2d 100644 --- a/static/code/stackblitz/v8/html/variables.css +++ b/static/code/stackblitz/v8/html/variables.css @@ -1,163 +0,0 @@ -/* Ionic Variables and Theming. For more info, please see: -http://ionicframework.com/docs/theming/ */ - -/** Ionic CSS Variables **/ - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css index b4daece811d..e69de29bb2d 100644 --- a/static/code/stackblitz/v8/react/variables.css +++ b/static/code/stackblitz/v8/react/variables.css @@ -1,163 +0,0 @@ -/* Ionic Variables and Theming. For more info, please see: -http://ionicframework.com/docs/theming/ */ - -/** Ionic CSS Variables **/ - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css index b4daece811d..e69de29bb2d 100644 --- a/static/code/stackblitz/v8/vue/variables.css +++ b/static/code/stackblitz/v8/vue/variables.css @@ -1,163 +0,0 @@ -/* Ionic Variables and Theming. For more info, please see: -http://ionicframework.com/docs/theming/ */ - -/** Ionic CSS Variables **/ - -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } -} From 5b4cfed4bb75a63a29d86ca7c389264c3e9e75c7 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 12 Jan 2024 13:30:06 -0600 Subject: [PATCH 8/8] move variables.css after dark theme imports --- static/code/stackblitz/v8/html/index.ts | 6 +++--- static/code/stackblitz/v8/react/app.tsx | 6 +++--- static/code/stackblitz/v8/react/app.withContent.tsx | 6 +++--- static/code/stackblitz/v8/vue/main.ts | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts index 24e443de622..0e45cf87ccf 100644 --- a/static/code/stackblitz/v8/html/index.ts +++ b/static/code/stackblitz/v8/html/index.ts @@ -18,9 +18,6 @@ import '@ionic/core/css/text-transformation.css'; import '@ionic/core/css/flex-utils.css'; import '@ionic/core/css/display.css'; -/* Theme variables */ -import './theme/variables.css'; - /** * Ionic Dark Theme * ----------------------------------------------------- @@ -32,6 +29,9 @@ import './theme/variables.css'; // import '@ionic/core/css/themes/dark.class.css'; import '@ionic/core/css/themes/dark.system.css'; +/* Theme variables */ +import './theme/variables.css'; + defineCustomElements(); (window as any).loadingController = loadingController; diff --git a/static/code/stackblitz/v8/react/app.tsx b/static/code/stackblitz/v8/react/app.tsx index 5340400e43c..733e3a586bd 100644 --- a/static/code/stackblitz/v8/react/app.tsx +++ b/static/code/stackblitz/v8/react/app.tsx @@ -17,9 +17,6 @@ import '@ionic/react/css/text-transformation.css'; import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; -/* Theme variables */ -import './theme/variables.css'; - /** * Ionic Dark Theme * ----------------------------------------------------- @@ -31,6 +28,9 @@ import './theme/variables.css'; // import '@ionic/react/css/themes/dark.class.css'; import '@ionic/react/css/themes/dark.system.css'; +/* Theme variables */ +import './theme/variables.css'; + import Example from './main'; setupIonicReact(); diff --git a/static/code/stackblitz/v8/react/app.withContent.tsx b/static/code/stackblitz/v8/react/app.withContent.tsx index 38954f5e6fb..d826cd168f2 100644 --- a/static/code/stackblitz/v8/react/app.withContent.tsx +++ b/static/code/stackblitz/v8/react/app.withContent.tsx @@ -17,9 +17,6 @@ import '@ionic/react/css/text-transformation.css'; import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; -/* Theme variables */ -import './theme/variables.css'; - /** * Ionic Dark Theme * ----------------------------------------------------- @@ -31,6 +28,9 @@ import './theme/variables.css'; // import '@ionic/react/css/themes/dark.class.css'; import '@ionic/react/css/themes/dark.system.css'; +/* Theme variables */ +import './theme/variables.css'; + import Example from './main'; setupIonicReact(); diff --git a/static/code/stackblitz/v8/vue/main.ts b/static/code/stackblitz/v8/vue/main.ts index e3edf08b891..03f90875d35 100644 --- a/static/code/stackblitz/v8/vue/main.ts +++ b/static/code/stackblitz/v8/vue/main.ts @@ -19,9 +19,6 @@ import '@ionic/vue/css/text-transformation.css'; import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; -/* Theme variables */ -import './theme/variables.css'; - /** * Ionic Dark Theme * ----------------------------------------------------- @@ -33,4 +30,7 @@ import './theme/variables.css'; // import '@ionic/vue/css/themes/dark.class.css'; import '@ionic/vue/css/themes/dark.system.css'; +/* Theme variables */ +import './theme/variables.css'; + createApp(App).use(IonicVue).mount('#app');