diff --git a/core/scripts/vercel-build.sh b/core/scripts/vercel-build.sh index 99c83b22adc..a456d847e2e 100755 --- a/core/scripts/vercel-build.sh +++ b/core/scripts/vercel-build.sh @@ -48,6 +48,7 @@ echo "Copying core output..." cp -r "${CORE_DIR}/src" "${OUTPUT_DIR}/src" cp -r "${CORE_DIR}/dist" "${OUTPUT_DIR}/dist" cp -r "${CORE_DIR}/css" "${OUTPUT_DIR}/css" +cp -r "${CORE_DIR}/themes" "${OUTPUT_DIR}/themes" mkdir -p "${OUTPUT_DIR}/scripts" cp -r "${CORE_DIR}/scripts/testing" "${OUTPUT_DIR}/scripts/testing" diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss deleted file mode 100644 index cbcf411fccd..00000000000 --- a/core/src/components/chip/chip.ionic.scss +++ /dev/null @@ -1,133 +0,0 @@ -@use "../../themes/ionic/ionic.globals.scss" as globals; -@use "./chip.common"; - -// Ionic Chip -// -------------------------------------------------- - -:host { - /** - * @prop --focus-ring-color: Color of the focus ring - * @prop --focus-ring-width: Width of the focus ring - */ - --focus-ring-color: #{globals.$ion-border-focus-default}; - --focus-ring-width: #{globals.$ion-border-size-050}; - - @include globals.padding(globals.$ion-space-150, globals.$ion-space-200); - @include globals.border-radius(var(--border-radius)); - @include globals.typography(globals.$ion-body-sm-medium); - - gap: globals.$ion-space-100; - - line-height: globals.$ion-font-line-height-full; - - cursor: auto; -} - -// Outline Chip -// --------------------------------------------- - -:host(.chip-outline) { - border-width: globals.$ion-border-size-025; - border-style: globals.$ion-border-style-solid; -} - -// Chip: Focus -// --------------------------------------------- - -:host(.ion-focused) { - @include globals.focused-state(null, null, var(--focus-ring-color)); -} - -// Chip: Disabled -// --------------------------------------------- - -:host(.chip-disabled)::after { - @include globals.disabled-state(); -} - -// Chip Shapes -// --------------------------------------------- - -:host(.chip-soft) { - --border-radius: #{globals.$ion-border-radius-100}; -} - -:host(.chip-round) { - --border-radius: #{globals.$ion-border-radius-400}; -} - -:host(.chip-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; -} - -// Size -// --------------------------------------------- - -:host(.chip-small) { - min-height: globals.$ion-scale-600; - - font-size: globals.$ion-font-size-300; - - ::slotted(ion-icon) { - font-size: globals.$ion-font-size-300; - } -} - -:host(.chip-large) { - min-height: globals.$ion-scale-800; - - font-size: globals.$ion-font-size-350; - - ::slotted(ion-icon) { - font-size: globals.$ion-font-size-400; - } -} - -// Subtle Chip -// --------------------------------------------- - -:host(.chip-subtle) { - --background: #{globals.$ion-primitives-neutral-100}; - --color: #{globals.$ion-primitives-neutral-800}; -} - -:host(.chip-outline.chip-subtle) { - border-color: globals.$ion-primitives-neutral-300; -} - -// Bold Chip -// --------------------------------------------- - -:host(.chip-bold) { - --background: #{globals.$ion-bg-neutral-bold-default}; - --color: #{globals.$ion-bg-surface-default}; -} - -:host(.chip-outline.chip-bold) { - // TODO(FW-6450): this is a made up design choice based on a - // darker shade of the background color - border-color: globals.$ion-text-default; -} - -// Chip Colors -// --------------------------------------------- - -// Subtle -:host(.chip-subtle.ion-color) { - background: globals.current-color(base, $subtle: true); - color: globals.current-color(contrast, $subtle: true); -} - -:host(.chip-subtle.chip-outline.ion-color) { - border-color: globals.current-color(shade, $subtle: true); -} - -// Bold -:host(.chip-bold.ion-color) { - background: globals.current-color(base); - color: globals.current-color(contrast); -} - -:host(.chip-bold.chip-outline.ion-color) { - border-color: globals.current-color(shade); -} diff --git a/core/src/components/spinner/spinner.common.scss b/core/src/components/spinner/spinner.common.scss deleted file mode 100644 index cd0c5045daa..00000000000 --- a/core/src/components/spinner/spinner.common.scss +++ /dev/null @@ -1,208 +0,0 @@ -@import "../../themes/mixins"; -// Required to use the current-color function -@import "../../themes/functions.color"; - -// Spinners -// -------------------------------------------------- - -:host { - /** - * @prop --color: Color of the spinner - */ - - display: inline-block; - position: relative; - - width: 28px; - height: 28px; - - color: var(--color); - - overflow: hidden; - - user-select: none; -} - -:host(.ion-color) { - color: current-color(base); -} - -svg { - @include transform-origin(center); - - position: absolute; - - /** - * Do not use @include position - * as the alignment of the elements with - * a spinner should not be RTL aware. - */ - top: 0; - /* stylelint-disable-next-line property-disallowed-list */ - left: 0; - - width: 100%; - height: 100%; - - transform: translateZ(0); -} - -// Spinner: lines / lines-small / lines-sharp / lines-sharp-small -// -------------------------------------------------- - -:host(.spinner-lines) line, -:host(.spinner-lines-small) line, -:host(.spinner-lines-sharp) line, -:host(.spinner-lines-sharp-small) line { - stroke-linecap: round; - stroke: currentColor; -} - -:host(.spinner-lines) svg, -:host(.spinner-lines-small) svg, -:host(.spinner-lines-sharp) svg, -:host(.spinner-lines-sharp-small) svg { - animation: spinner-fade-out 1s linear infinite; -} - -// Spinner: bubbles -// -------------------------------------------------- - -:host(.spinner-bubbles) svg { - animation: spinner-scale-out 1s linear infinite; - fill: currentColor; -} - -// Spinner: circles -// -------------------------------------------------- - -:host(.spinner-circles) svg { - animation: spinner-fade-out 1s linear infinite; - fill: currentColor; -} - -// Spinner: crescent -// -------------------------------------------------- - -:host(.spinner-crescent) circle { - fill: transparent; - stroke-width: 4px; - stroke-dasharray: 128px; - stroke-dashoffset: 82px; - stroke: currentColor; -} - -:host(.spinner-crescent) svg { - animation: spinner-rotate 1s linear infinite; -} - -// Spinner: dots -// -------------------------------------------------- - -:host(.spinner-dots) circle { - stroke-width: 0; - fill: currentColor; -} - -:host(.spinner-dots) svg { - animation: spinner-dots 1s linear infinite; -} - -// Spinner: circular -// -------------------------------------------------- - -:host(.spinner-circular) svg { - animation: spinner-circular linear infinite; -} - -:host(.spinner-circular) circle { - animation: spinner-circular-inner ease-in-out infinite; - stroke: currentColor; - stroke-dasharray: 80px, 200px; - stroke-dashoffset: 0px; - stroke-width: 5.6; - fill: none; -} - -// Spinner: paused -// -------------------------------------------------- - -:host(.spinner-paused), -:host(.spinner-paused) svg, -:host(.spinner-paused) circle { - animation-play-state: paused; -} - -// Animation Keyframes -// -------------------------------------------------- - -@keyframes spinner-fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes spinner-scale-out { - 0% { - transform: scale(1, 1); - } - - 100% { - transform: scale(0, 0); - } -} - -@keyframes spinner-rotate { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} - -@keyframes spinner-dots { - 0% { - transform: scale(1, 1); - - opacity: 0.9; - } - - 50% { - transform: scale(0.4, 0.4); - - opacity: 0.3; - } - - 100% { - transform: scale(1, 1); - - opacity: 0.9; - } -} - -@keyframes spinner-circular { - 100% { - transform: rotate(360deg); - } -} - -@keyframes spinner-circular-inner { - 0% { - stroke-dasharray: 1px, 200px; - stroke-dashoffset: 0px; - } - 50% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -15px; - } - 100% { - stroke-dasharray: 100px, 200px; - stroke-dashoffset: -125px; - } -}