From 7bf72f62222be79d773035374311c66535d086ce Mon Sep 17 00:00:00 2001 From: rdlabo Date: Mon, 31 Aug 2026 12:39:28 +0900 Subject: [PATCH 1/2] refactor: prefer CSS custom properties --- src/styles/components/ion-button.scss | 4 +--- src/styles/components/ion-range.scss | 8 +++---- src/styles/components/ion-toggle.scss | 32 ++++++++++++-------------- src/styles/components/ion-toolbar.scss | 11 +++++---- src/styles/utils/structured-list.scss | 5 +--- 5 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/styles/components/ion-button.scss b/src/styles/components/ion-button.scss index 905caef..1cfedfb 100644 --- a/src/styles/components/ion-button.scss +++ b/src/styles/components/ion-button.scss @@ -109,9 +109,7 @@ ion-button.md:not(.md3-disabled) { ion-back-button.md:not(.md3-disabled) { --border-radius: 999px; + --min-height: 40px; --padding-start: 16px; --padding-end: 16px; - &::part(native) { - min-height: 40px; - } } diff --git a/src/styles/components/ion-range.scss b/src/styles/components/ion-range.scss index bf36cda..6ef843f 100644 --- a/src/styles/components/ion-range.scss +++ b/src/styles/components/ion-range.scss @@ -3,7 +3,7 @@ ion-range.md:not(.md3-disabled) { --bar-height: 16px; --bar-border-radius: 8px; - --knob-background: transparent; + --knob-background: var(--ion-color-primary); --knob-box-shadow: none; --knob-border-radius: 8px; --knob-size: 44px; @@ -21,16 +21,14 @@ ion-range.md:not(.md3-disabled) { transform var(--token-expressive-fast-effects), outline var(--token-expressive-fast-effects); will-change: width; - height: var(--knob-size); - background: var(--ion-color-primary); transform: translateX(calc(var(--knob-size) / 2 - 2px)); &:before { content: none; } } - &.ion-color::part(knob) { - background: var(--ion-color-base, var(--ion-color-primary)); + &.ion-color { + --knob-background: var(--ion-color-base, var(--ion-color-primary)); } &::part(tick), diff --git a/src/styles/components/ion-toggle.scss b/src/styles/components/ion-toggle.scss index 2fbf245..927da04 100644 --- a/src/styles/components/ion-toggle.scss +++ b/src/styles/components/ion-toggle.scss @@ -6,35 +6,33 @@ ion-toggle.md:not(.md3-disabled) { --handle-box-shadow: none; --handle-spacing: 2px; --handle-transition: transform var(--token-expressive-default-special), background-color var(--token-expressive-default-effects); + --track-background: var(--ion-background-color-step-100, #e6e0e9); + --handle-background: var(--ion-text-color-step-450, #79747e); &::part(track) { box-sizing: border-box; min-height: 32px; min-width: 52px; border: 2px solid var(--ion-text-color-step-450, #79747e); - background: var(--ion-background-color-step-100, #e6e0e9); } - &.toggle-checked::part(track) { - border-color: var(--ion-color-base); - background: var(--ion-color-base); - } - - &::part(handle) { - background: var(--ion-text-color-step-450, #79747e); - } + &.toggle-checked { + --track-background-checked: var(--ion-color-base); + --handle-background-checked: var(--ion-color-contrast); - &.toggle-checked::part(handle) { - background: var(--ion-color-contrast); + &::part(track) { + border-color: var(--ion-color-base); + } } &:not(.ion-color) { - &.toggle-checked::part(track) { - border-color: var(--ion-color-primary); - background: var(--ion-color-primary); - } - &.toggle-checked::part(handle) { - background: var(--ion-color-primary-contrast); + &.toggle-checked { + --track-background-checked: var(--ion-color-primary); + --handle-background-checked: var(--ion-color-primary-contrast); + + &::part(track) { + border-color: var(--ion-color-primary); + } } } } diff --git a/src/styles/components/ion-toolbar.scss b/src/styles/components/ion-toolbar.scss index 86fe55f..0940d8d 100644 --- a/src/styles/components/ion-toolbar.scss +++ b/src/styles/components/ion-toolbar.scss @@ -32,11 +32,12 @@ ion-header.md:not(.md3-disabled) ion-toolbar { ion-toolbar.md:not(.md3-disabled) { ion-back-button.back-button-has-icon-only { --icon-font-size: 24px; - &::part(native) { - width: 48px; - height: 48px; - padding: 0; - } + --min-width: 48px; + --min-height: 48px; + --padding-top: 0; + --padding-end: 0; + --padding-bottom: 0; + --padding-start: 0; } ion-button.button-has-icon-only:not(.button-small):not(.button-large) { diff --git a/src/styles/utils/structured-list.scss b/src/styles/utils/structured-list.scss index e287125..357c0ed 100644 --- a/src/styles/utils/structured-list.scss +++ b/src/styles/utils/structured-list.scss @@ -135,15 +135,12 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group } &.item-disabled { + --detail-icon-opacity: 0.1; opacity: 1; & > * { opacity: 0.4; } - - &::part(detail-icon) { - opacity: 0.1; - } } ion-button[slot='end'] { From a64b120d15148c06b196a6cee396246c5efb47df Mon Sep 17 00:00:00 2001 From: Masahiko Sakakibara Date: Mon, 31 Aug 2026 15:08:05 +0900 Subject: [PATCH 2/2] refactor: remove unnecessary important declarations (#40) --- src/styles/components/ion-action-sheet.scss | 2 +- src/styles/components/ion-list.scss | 6 +++--- src/styles/utils/structured-list.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/components/ion-action-sheet.scss b/src/styles/components/ion-action-sheet.scss index c199905..e38c8b6 100644 --- a/src/styles/components/ion-action-sheet.scss +++ b/src/styles/components/ion-action-sheet.scss @@ -1,5 +1,5 @@ ion-action-sheet.md:not(.md3-disabled) { - --max-width: 640px !important; + --max-width: 640px; .action-sheet-container { overflow: hidden; diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss index 65ea767..1863189 100644 --- a/src/styles/components/ion-list.scss +++ b/src/styles/components/ion-list.scss @@ -29,9 +29,9 @@ ion-list.md:not(.md3-disabled).list-inset { --show-full-highlight: 1; } - &:has(ion-input.input-fill-outline), - &:has(ion-textarea.textarea-fill-outline) { - --border-width: 0 !important; + &:has(:is(ion-input.input-fill-outline, ion-textarea.textarea-fill-outline)):not(.item-lines-inset):not(.item-lines-none), + &:has(:is(ion-input.input-fill-outline, ion-textarea.textarea-fill-outline)):is(.item-lines-inset, .item-lines-none) { + --border-width: 0; --inner-padding-bottom: 4px; ion-input, ion-textarea { diff --git a/src/styles/utils/structured-list.scss b/src/styles/utils/structured-list.scss index 357c0ed..a4ce3e6 100644 --- a/src/styles/utils/structured-list.scss +++ b/src/styles/utils/structured-list.scss @@ -148,7 +148,7 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group transform: translateY(-7px); } ion-icon[slot='icon-only'] { - font-size: 1.2rem !important; + font-size: 1.2rem; transform: translateY(4px); } }