commit: bcc50844096b47c0656ed3338de222055a749fb1 parent 17b25ef0e0eb261fbfd09be740a1cd8c0e3ad88b Author: Henry Jameson <me@hjkos.com> Date: Tue, 13 Feb 2024 02:09:43 +0200 add roundness, fix inputsDiffstat:
33 files changed, 150 insertions(+), 150 deletions(-)diff --git a/src/App.scss b/src/App.scss@@ -355,8 +355,7 @@ nav { user-select: none; color: var(--text); border: none; - border-radius: $fallback--btnRadius; - border-radius: var(--btnRadius, $fallback--btnRadius); + border-radius: var(--roundness); cursor: pointer; box-shadow: var(--shadow); font-size: 1em; @@ -380,6 +379,16 @@ nav { font-family: inherit; cursor: pointer; color: inherit; + + &:first-child { + border-top-right-radius: var(--roundness); + border-top-left-radius: var(--roundness); + } + + &:last-child { + border-bottom-right-radius: var(--roundness); + border-bottom-left-radius: var(--roundness); + } } .button-unstyled { @@ -423,8 +432,7 @@ textarea { --_padding: 0.5em; border: none; - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); + border-radius: var(--roundness); box-shadow: var(--shadow); font-family: sans-serif; font-family: var(--inputFont, sans-serif); @@ -511,8 +519,7 @@ textarea { transition: color 200ms; width: 1.1em; height: 1.1em; - border-radius: $fallback--checkboxRadius; - border-radius: var(--checkboxRadius, $fallback--checkboxRadius); + border-radius: var(--roundness); box-shadow: 0 0 2px black inset; box-shadow: var(--inputShadow); margin-right: 0.5em; @@ -562,7 +569,7 @@ option { li { border: 1px solid var(--border); - border-radius: var(--inputRadius); + border-radius: var(--roundness); padding: 0.5em; margin: 0.25em; } @@ -634,8 +641,7 @@ option { .alert { margin: 0 0.35em; padding: 0 0.25em; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + border-radius: var(--roundness); &.error { background-color: $fallback--alertError; @@ -682,8 +688,7 @@ option { padding: 0.5em; border: 1px solid $fallback--faint; border: 1px solid var(--faint, $fallback--faint); - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); + border-radius: var(--roundness); } .notice-dismissible {diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue@@ -1,3 +1,4 @@ +<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER --> <template> <div v-click-outside="onClickOutside" @@ -11,7 +12,7 @@ > <div v-if="resultsVisible && filtered.length > 0" - class="autosuggest-results" + class="panel autosuggest-results" > <slot v-for="item in filtered" @@ -45,13 +46,12 @@ border-style: solid; border-width: 1px; border-color: $fallback--border; - border-color: var(--border, $fallback--border); - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); + border-color: var(--border); + border-radius: var(--roundness); border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); - box-shadow: var(--panelShadow); + box-shadow: var(--shadow); overflow-y: auto; z-index: 1; }diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js@@ -1,11 +1,13 @@ export default { name: 'Avatar', selector: '.Avatar', + variants: { + compact: '.-compact' + }, defaultRules: [ { directives: { - background: '--bg', - opacity: 0, + roundness: 3, shadow: [{ x: 0, y: 1,diff --git a/src/components/button.style.js b/src/components/button.style.js@@ -64,7 +64,8 @@ export default { // like within it directives: { background: '--fg', - shadow: [buttonOuterShadow, ...buttonInsetFakeBorders] + shadow: [buttonOuterShadow, ...buttonInsetFakeBorders], + roundness: 3 } }, {diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js@@ -15,9 +15,7 @@ export default { defaultRules: [ { directives: { - background: '--fg', - shadow: [], - opacity: 0 + shadow: [] } }, {diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss@@ -18,8 +18,9 @@ overflow: visible; min-height: calc(100vh - var(--navbar-height)); margin: 0; - border-radius: 10px 10px 0 0; - border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0; + border-radius: var(--roundness); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; &::after { border-radius: 0;diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue@@ -1,7 +1,7 @@ <template> <div ref="root" - class="emoji-input" + class="input emoji-input" :class="{ 'with-picker': !hideEmojiButton }" > <slot @@ -68,9 +68,9 @@ v-for="(suggestion, index) in suggestions" :id="suggestionItemId(index)" :key="index" - class="autocomplete-item" + class="menu-item autocomplete-item" role="option" - :class="{ highlighted: index === highlighted }" + :class="{ active: index === highlighted }" :aria-label="autoCompleteItemLabel(suggestion)" :aria-selected="index === highlighted" @click.stop.prevent="onClick($event, suggestion)" @@ -145,7 +145,9 @@ textarea { flex: 1 0 auto; color: inherit; + padding: 0; background: none; + box-shadow: none; border: none; outline: none; } @@ -186,7 +188,6 @@ display: flex; cursor: pointer; padding: 0.2em 0.4em; - border-bottom: 1px solid rgb(0 0 0 / 40%); height: 32px; .image { @@ -219,16 +220,6 @@ line-height: 9px; } } - - &.highlighted { - background-color: $fallback--fg; - background-color: var(--selectedMenuPopover, $fallback--fg); - color: var(--selectedMenuPopoverText, $fallback--text); - - --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); - --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); - --icon: var(--selectedMenuPopoverIcon, $fallback--icon); - } } } </style>diff --git a/src/components/input.style.js b/src/components/input.style.js@@ -34,6 +34,7 @@ export default { { directives: { background: '--fg, -5', + roundness: 3, shadow: [{ x: 0, y: 0,diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue@@ -51,8 +51,7 @@ width: 100%; height: 100%; object-fit: cover; - border-radius: $fallback--attachmentRadius; - border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + border-radius: var(--roundness); } } @@ -86,8 +85,7 @@ color: var(--text, $fallback--text); border-style: solid; border-width: 1px; - border-radius: $fallback--attachmentRadius; - border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + border-radius: var(--roundness); border-color: $fallback--border; border-color: var(--border, $fallback--border); }diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js@@ -9,7 +9,7 @@ export default { ], states: { hover: ':hover', - active: 'active' + active: '.active' }, defaultRules: [ { @@ -26,6 +26,13 @@ export default { } }, { + state: ['active'], + directives: { + background: '$mod(--bg, 5)', + opacity: 1 + } + }, + { component: 'Text', variant: 'normal', parent: {diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue@@ -20,7 +20,7 @@ /> <div v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount" - class="alert-dot" + class="badge alert-dot" /> </button> <NavigationPins class="pins" /> @@ -37,7 +37,7 @@ /> <div v-if="unseenNotificationsCount" - class="alert-dot" + class="badge alert-dot" /> </button> </div>diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue@@ -54,7 +54,7 @@ @click="toggleTag(tags.FORCE_NSFW)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }" /> {{ $t('user_card.admin_menu.force_nsfw') }} @@ -64,7 +64,7 @@ @click="toggleTag(tags.STRIP_MEDIA)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }" /> {{ $t('user_card.admin_menu.strip_media') }} @@ -74,7 +74,7 @@ @click="toggleTag(tags.FORCE_UNLISTED)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }" /> {{ $t('user_card.admin_menu.force_unlisted') }} @@ -84,7 +84,7 @@ @click="toggleTag(tags.SANDBOX)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }" /> {{ $t('user_card.admin_menu.sandbox') }} @@ -95,7 +95,7 @@ @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }" /> {{ $t('user_card.admin_menu.disable_remote_subscription') }} @@ -106,7 +106,7 @@ @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }" /> {{ $t('user_card.admin_menu.disable_any_subscription') }} @@ -117,7 +117,7 @@ @click="toggleTag(tags.QUARANTINE)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }" /> {{ $t('user_card.admin_menu.quarantine') }}diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue@@ -126,17 +126,13 @@ > li { &:first-child.menu-item { - border-top-right-radius: $fallback--panelRadius; - border-top-right-radius: var(--panelRadius, $fallback--panelRadius); - border-top-left-radius: $fallback--panelRadius; - border-top-left-radius: var(--panelRadius, $fallback--panelRadius); + border-top-right-radius: var(--roundness); + border-top-left-radius: var(--roundness); } &:last-child.menu-item { - border-bottom-right-radius: $fallback--panelRadius; - border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); - border-bottom-left-radius: $fallback--panelRadius; - border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius); + border-bottom-right-radius: var(--roundness); + border-bottom-left-radius: var(--roundness); } }diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue@@ -19,7 +19,7 @@ >{{ item.iconLetter }}</span> <div v-if="item.badgeGetter && getters[item.badgeGetter]" - class="alert-dot" + class="badge alert-dot" /> </router-link> </span>diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue@@ -12,7 +12,7 @@ @click="toggleNotificationFilter('likes')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.likes }" />{{ $t('settings.notification_visibility_likes') }} </button> @@ -21,7 +21,7 @@ @click="toggleNotificationFilter('repeats')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.repeats }" />{{ $t('settings.notification_visibility_repeats') }} </button> @@ -30,7 +30,7 @@ @click="toggleNotificationFilter('follows')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.follows }" />{{ $t('settings.notification_visibility_follows') }} </button> @@ -39,7 +39,7 @@ @click="toggleNotificationFilter('mentions')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.mentions }" />{{ $t('settings.notification_visibility_mentions') }} </button> @@ -48,7 +48,7 @@ @click="toggleNotificationFilter('emojiReactions')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.emojiReactions }" />{{ $t('settings.notification_visibility_emoji_reactions') }} </button> @@ -57,7 +57,7 @@ @click="toggleNotificationFilter('moves')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.moves }" />{{ $t('settings.notification_visibility_moves') }} </button> @@ -66,7 +66,7 @@ @click="toggleNotificationFilter('polls')" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': filters.polls }" />{{ $t('settings.notification_visibility_polls') }} </button>diff --git a/src/components/panel.style.js b/src/components/panel.style.js@@ -17,6 +17,7 @@ export default { { directives: { background: '--bg', + roundness: 3, shadow: [{ x: 1, y: 1,diff --git a/src/components/popover.style.js b/src/components/popover.style.js@@ -9,6 +9,7 @@ export default { 'Text', 'Link', 'Icon', + 'Border', 'Button', 'ButtonUnstyled', 'Input',diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue@@ -69,13 +69,15 @@ pointer-events: none; } - border-radius: $fallback--btnRadius; - border-radius: var(--btnRadius, $fallback--btnRadius); + border-radius: var(--roundness); + border-color: var(--border); + border-style: solid; + border-width: 1px; } .dropdown-menu { display: block; - padding: 0.5rem 0; + padding: 0; font-size: 1em; text-align: left; list-style: none; @@ -108,8 +110,6 @@ height: 100%; box-sizing: border-box; - --btnText: var(--popoverText, $fallback--text); - &-icon { svg { width: 22px; @@ -134,10 +134,7 @@ line-height: 22px; text-align: center; border-radius: 0; - background-color: $fallback--fg; - background-color: var(--input, $fallback--fg); - box-shadow: 0 0 2px black inset; - box-shadow: var(--inputShadow); + box-shadow: var(--shadow); margin-right: 0.75em; &.menu-checkbox-checked::after {diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue@@ -22,7 +22,7 @@ @click="replyVisibilityAll = true" > <span - class="menu-checkbox -radio" + class="input menu-checkbox -radio" :class="{ 'menu-checkbox-checked': replyVisibilityAll }" :aria-hidden="true" />{{ $t('settings.reply_visibility_all') }} @@ -35,7 +35,7 @@ @click="replyVisibilityFollowing = true" > <span - class="menu-checkbox -radio" + class="input menu-checkbox -radio" :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }" :aria-hidden="true" />{{ $t('settings.reply_visibility_following_short') }} @@ -48,7 +48,7 @@ @click="replyVisibilitySelf = true" > <span - class="menu-checkbox -radio" + class="input menu-checkbox -radio" :class="{ 'menu-checkbox-checked': replyVisibilitySelf }" :aria-hidden="true" />{{ $t('settings.reply_visibility_self_short') }} @@ -66,7 +66,7 @@ @click="muteBotStatuses = !muteBotStatuses" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': muteBotStatuses }" :aria-hidden="true" />{{ $t('settings.mute_bot_posts') }} @@ -78,7 +78,7 @@ @click="hideMedia = !hideMedia" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hideMedia }" :aria-hidden="true" />{{ $t('settings.hide_media_previews') }} @@ -90,7 +90,7 @@ @click="hideMutedPosts = !hideMutedPosts" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': hideMutedPosts }" :aria-hidden="true" />{{ $t('settings.hide_all_muted_posts') }}diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue@@ -18,7 +18,7 @@ @click="conversationDisplay = 'tree'" > <span - class="menu-checkbox -radio" + class="input menu-checkbox -radio" :aria-hidden="true" :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }" /><FAIcon @@ -33,7 +33,7 @@ @click="conversationDisplay = 'linear'" > <span - class="menu-checkbox -radio" + class="input menu-checkbox -radio" :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }" :aria-hidden="true" /><FAIcon @@ -53,7 +53,7 @@ @click="showUserAvatars = !showUserAvatars" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': showUserAvatars }" :aria-hidden="true" />{{ $t('settings.mention_link_show_avatar_quick') }} @@ -66,7 +66,7 @@ @click="autoUpdate = !autoUpdate" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': autoUpdate }" :aria-hidden="true" />{{ $t('settings.auto_update') }} @@ -79,7 +79,7 @@ @click="collapseWithSubjects = !collapseWithSubjects" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': collapseWithSubjects }" :aria-hidden="true" />{{ $t('settings.collapse_subject') }}diff --git a/src/components/root.style.js b/src/components/root.style.js@@ -6,13 +6,5 @@ export default { 'Modals', 'Popover', 'TopBar' - ], - defaultRules: [ - { - directives: { - background: '--bg', - opacity: 0 - } - } ] }diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss@@ -43,8 +43,7 @@ display: block; width: 100%; height: 100%; - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); + border-radius: var(--roundness); } .reset-button {diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue@@ -293,16 +293,14 @@ linear-gradient(-45deg, transparent 75%, #666 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; - border-radius: $fallback--inputRadius; - border-radius: var(--inputRadius, $fallback--inputRadius); + border-radius: var(--roundness); .preview-block { width: 33%; height: 33%; background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); - border-radius: $fallback--panelRadius; - border-radius: var(--panelRadius, $fallback--panelRadius); + border-radius: var(--roundness); } } }diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue@@ -128,8 +128,7 @@ img { height: 24px; width: 24px; - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); + border-radius: var(--roundness); margin-right: 0.5em; margin-top: 0.25em; }diff --git a/src/components/status/status.scss b/src/components/status/status.scss@@ -247,7 +247,7 @@ } .repeater-avatar { - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + border-radius: var(--roundness); margin-left: 28px; width: 20px; height: 20px; @@ -363,7 +363,6 @@ .avatar-row { flex: 1; - overflow: hidden; position: relative; display: flex; align-items: center; @@ -421,7 +420,7 @@ .quoted-status { margin-top: 0.5em; border: 1px solid var(--border, $fallback--border); - border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + border-radius: var(--roundness); &.-unavailable-prompt { padding: 0.5em;diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue@@ -47,12 +47,9 @@ font-size: 1rem; min-width: 15em; max-width: 95%; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); + border-color: var(--border); border-style: solid; border-width: 1px; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); /* TODO cleanup this */ .Status.Status {diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss@@ -10,22 +10,19 @@ top: calc(50% - 4px); margin-left: 6px; margin-top: -6px; - background-color: var(--badgeNeutral); } .alert-badge { font-size: 0.75em; line-height: 1; text-align: right; - border-radius: var(--tooltipRadius); + border-radius: var(--roundness); position: absolute; left: calc(50% - 0.5em); top: calc(50% - 0.4em); padding: 0.2em; margin-left: 0.7em; margin-top: -1em; - background-color: var(--badgeNeutral); - color: var(--badgeNeutralText); } .loadmore-button {diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue@@ -43,16 +43,14 @@ &.-compact { width: 32px; height: 32px; - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + border-radius: var(--roundness); } .avatar { width: 100%; height: 100%; box-shadow: var(--_avatarShadowBox); - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); + border-radius: var(--roundness); &.-better-shadow { box-shadow: var(--_avatarShadowInset); @@ -64,13 +62,11 @@ } &.-compact { - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + border-radius: var(--roundness); } &.-placeholder { - background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--background); } } @@ -87,7 +83,7 @@ padding: 0.2em; background: rgb(127 127 127 / 50%); color: #fff; - border-radius: var(--tooltipRadius); + border-radius: var(--roundness); } } </style>diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss@@ -153,8 +153,7 @@ display: flex; justify-content: center; align-items: center; - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); + border-radius: var(--roundness); opacity: 0; transition: opacity 0.2s ease;diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue@@ -14,7 +14,7 @@ @click="toggleList(list.id)" > <span - class="menu-checkbox" + class="input menu-checkbox" :class="{ 'menu-checkbox-checked': list.inList }" /> {{ list.title }}diff --git a/src/panel.scss b/src/panel.scss@@ -10,8 +10,7 @@ &::after, & { - border-radius: $fallback--panelRadius; - border-radius: var(--panelRadius, $fallback--panelRadius); + border-radius: var(--roundness); } &::after { @@ -77,8 +76,7 @@ &.-stub { &, &::after { - border-radius: $fallback--panelRadius; - border-radius: var(--panelRadius, $fallback--panelRadius); + border-radius: var(--roundness); } } @@ -126,16 +124,15 @@ // TODO Should refactor panels into separate component and utilize slots .panel-heading { - border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; - border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; + border-radius: var(--roundness) var(--roundness) 0 0; border-width: 0 0 1px; align-items: start; &::after { background-color: var(--background); z-index: -2; - border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; - border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; box-shadow: var(--shadow); } @@ -179,8 +176,8 @@ } .panel-footer { - border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; - border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); + border-top-left-radius: 0; + border-top-right-radius: 0; align-items: center; border-width: 1px 0 0; border-style: solid;diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js@@ -24,7 +24,7 @@ export const applyTheme = (input) => { const styleSheet = styleEl.sheet styleSheet.toString() - styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max') + // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max') // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js@@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => { }) } else { computed[selector] = computed[selector] || {} + let addRuleNeeded = false + + // TODO: DEFAULT TEXT COLOR + const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb + + if ( + computedDirectives.shadow != null || + computedDirectives.roundness != null + ) { + addRuleNeeded = true + } - // TODO make background non-mandatory if (computedDirectives.background) { + addRuleNeeded = true let inheritRule = null const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent })) const lastVariantRule = variantRules[variantRules.length - 1] @@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => { const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true) const inheritedBackground = computed[inheritSelector].background - // TODO: DEFAULT TEXT COLOR - const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb - dynamicVars.inheritedBackground = inheritedBackground const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb @@ -520,16 +528,25 @@ export const init = (extraRuleset, palette) => { } stacked[selector] = blend computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 } - - addRule({ - selector, - component: component.name, - ...combination, - parent, - directives: computedDirectives - }) } } + + if (!stacked[selector]) { + computedDirectives.background = 'transparent' + computedDirectives.opacity = 0 + stacked[selector] = lowerLevelComputedBackground + computed[selector].background = { ...lowerLevelComputedBackground, a: 0 } + } + + if (addRuleNeeded) { + addRule({ + selector, + component: component.name, + ...combination, + parent, + directives: computedDirectives + }) + } } innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination })) @@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => { if (rule.component !== 'Root') { directives = Object.entries(rule.directives).map(([k, v]) => { switch (k) { + case 'roundness': { + return ' ' + [ + '--roundness: ' + v + 'px' + ].join(';\n ') + } case 'shadow': { return ' ' + [ '--shadow: ' + getCssShadow(v), @@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => { ].join(';\n ') } case 'background': { + if (v === 'transparent') { + return [ + 'background-color: ' + v, + ' --background: ' + v + ].join(';\n') + } const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity) return [ 'background-color: ' + color,