feat(base-components): add ability to remove ios and md theme (#26669)

core/src/components/picker/picker.scss

@@ -30,6 +30,8 @@
   --max-width: #{$picker-max-width};
   --min-height: auto;
   --max-height: auto;
+  --backdrop-opacity: 0;
+  --height: #{$picker-height};
 
   @include font-smoothing();
   @include position(0, null, null, 0);
@@ -88,6 +90,7 @@
 
 .picker-toolbar {
   width: 100%;
+  height: $picker-toolbar-height;
 
   background: transparent;
 
@@ -117,6 +120,8 @@
 
   justify-content: center;
 
+  height: $picker-height - $picker-toolbar-height;
+
   margin-bottom: var(--ion-safe-area-bottom, 0);
 
   contain: strict;

core/src/components/picker/picker.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
-import { getIonMode } from '../../global/ionic-global';
+import { getIonStylesheet } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
   CssClassMap,
@@ -30,11 +30,13 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 // TODO(FW-2832): types
 
 /**
+ * @virtualProp {true | false} useBase - useBase determines if base components is enabled.
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-picker',
   styleUrls: {
+    base: 'picker.scss',
     ios: 'picker.ios.scss',
     md: 'picker.md.scss',
   },
@@ -332,7 +334,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
   render() {
     const { htmlAttributes } = this;
-    const mode = getIonMode(this);
+    const mode = getIonStylesheet(this);
     return (
       <Host
         aria-modal="true"

core/src/components/picker/picker.vars.scss

@@ -8,3 +8,17 @@ $picker-width:                             100% !default;
 
 /// @prop - Max width of the picker
 $picker-max-width:                         500px !default;
+
+/// @prop - Height of the picker
+/**
+ * We choose an explicit height otherwise the picker will
+ * appear to be hidden when using base components.
+ */
+$picker-height: 200px !default;
+
+/// @prop - Height of the picker button toolbar
+/**
+ * We choose an explicit height otherwise the toolbar will
+ * appear to be hidden when using base components.
+ */
+$picker-toolbar-height: 50px !default;