Skip to content

refactor: font-weight and text-decoration to tailwind #1093

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JammingBen merged 5 commits into from
Aug 20, 2025
Merged

refactor: font-weight and text-decoration to tailwind #1093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ae98460
refactor: replace oc-font-semibold with tailwind class
JammingBen Aug 19, 2025
55ae60a
refactor: replace oc-text-bold with tailwind class
JammingBen Aug 19, 2025
901114b
refactor: migrate custom font-weight to tailwind
JammingBen Aug 19, 2025
a345f24
refactor: migrate custom text-tecoration to tailwind
JammingBen Aug 19, 2025
bdfa8ed
test(e2e): fix selector
JammingBen Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcAvatar/OcAvatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ const randomBackgroundColor = (seed: number, colors: string[]) => {

<style lang="scss">
.oc-avatar {
font-weight: normal;
align-items: center;
justify-content: center;
text-align: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
>
<oc-icon name="arrow-left" fill-type="line" />
</oc-button>
<span class="oc-text-bold" v-text="title" />
<span class="font-semibold" v-text="title" />
<oc-button
appearance="raw"
class="raw-hover-surface oc-bottom-drawer-close-button"
Expand Down
2 changes: 1 addition & 1 deletion ...ges/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
<div class="oc-card">
<div class="oc-card-header px-4 pt-4">
<div class="flex justify-between items-center">
<!--v-if--> <span class="oc-text-bold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
<!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
if (__props.accessibleLabel !== &quot;&quot;) {
Expand Down
8 changes: 2 additions & 6 deletions packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
:to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
class="first:text-base text-xl"
>
<span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">{{ item.text }}</span>
<span class="oc-breadcrumb-item-text hover:underline">{{ item.text }}</span>
</router-link>
<oc-button
v-else-if="item.onClick"
Expand All @@ -46,7 +46,7 @@
<span
:class="[
'oc-breadcrumb-item-text',
'oc-breadcrumb-item-navigable',
'hover:underline',
{
'oc-breadcrumb-item-text-last': index === displayItems.length - 1
}
Expand Down Expand Up @@ -325,10 +325,6 @@ const dropItemStyling = (
}
}

&-item-navigable:hover {
text-decoration: underline;
}

&-mobile-current,
&-mobile-navigation {
@media (min-width: $oc-breakpoint-small-default) {
Expand Down
16 changes: 8 additions & 8 deletions packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ exports[`OcBreadcrumb > displays all items 1`] = `
"<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default" aria-label="Breadcrumbs">
<ol class="oc-breadcrumb-list flex m-0 p-0">
<li data-key="0" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">First folder</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center oc-invisible-sr">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">...</span></router-link-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">...</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="2" class="oc-breadcrumb-list-item flex items-center">
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Subfolder</span></oc-button-stub>
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Subfolder</span></oc-button-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="3" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Deep</span></router-link-stub>
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Deep</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
Expand All @@ -40,22 +40,22 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
"<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead" aria-label="Breadcrumbs">
<ol class="oc-breadcrumb-list flex m-0 p-0">
<li data-key="0" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">First folder</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center oc-invisible-sr">
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">...</span></router-link-stub>
<router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">...</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="2" class="oc-breadcrumb-list-item flex items-center">
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Subfolder</span></oc-button-stub>
<oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="flex first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Subfolder</span></oc-button-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
<li data-key="3" class="oc-breadcrumb-list-item flex items-center">
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Deep</span></router-link-stub>
<router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text hover:underline">Deep</span></router-link-stub>
<oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
<!--v-if-->
</li>
Expand Down
3 changes: 0 additions & 3 deletions packages/design-system/src/components/OcButton/OcButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,6 @@ const onClick = (event: MouseEvent) => {
&-raw,
&-raw-inverse {
border-style: none;
font-weight: normal;
min-height: 0;

background-color: transparent;
Expand Down Expand Up @@ -252,9 +251,7 @@ const onClick = (event: MouseEvent) => {
border: 0;
box-sizing: border-box;
display: inline-flex;
font-weight: 400;
text-align: left;
text-decoration: none;

&-justify-content {
&-left {
Expand Down
4 changes: 3 additions & 1 deletion packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ const { items } = defineProps<Props>()
.details-list dd {
@apply ml-4;
}
.details-list dt {
@apply font-semibold;
}
.details-list dd:last-of-type,
.details-list dt:last-of-type {
@apply mb-0;
Expand All @@ -50,7 +53,6 @@ const { items } = defineProps<Props>()
align-items: center;
}
dt {
font-weight: bold;
white-space: nowrap;
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,6 @@ defineExpose({ hideDrop })
box-sizing: border-box;
display: inline-flex;
gap: var(--oc-space-xsmall);
text-decoration: none;
max-width: 150px;
height: 100%;
}
Expand Down
15 changes: 5 additions & 10 deletions packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@
:is="item.headline ? 'dt' : 'dd'"
v-for="(item, index) in listItems"
:key="index"
:class="{ 'ml-0': !item.headline, 'first:mt-0': item.headline }"
:class="{
Copy link
Contributor

@kulmann kulmann Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text of contextual helpers is now bold. That looks weird. Was normal weight before.

'ml-0': !item.headline,
'first:mt-0': item.headline,
'font-bold': item.headline
}"
>
{{ $gettext(item.text) }}
</component>
Expand Down Expand Up @@ -124,14 +128,5 @@ export default {
.info-header {
align-items: center;
}
.info-title {
font-weight: normal;
}
.info-list {
font-weight: bold;
dd {
font-weight: normal;
}
}
}
</style>
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcList/OcList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ ul.oc-list {
&-raw {
list-style-type: none;
a {
text-decoration: none !important;
&:hover {
color: inherit;
}
Expand Down
4 changes: 0 additions & 4 deletions packages/design-system/src/components/OcModal/OcModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,10 +355,6 @@ export default {
display: flex;
flex-flow: row wrap;
background-color: var(--oc-role-surface-container);

> h2 {
font-weight: bold;
}
}

&-body {
Expand Down
4 changes: 1 addition & 3 deletions packages/design-system/src/components/OcPagination/OcPagination.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const pageClass = (page: Page) => {
const classes = ['oc-pagination-list-item-page', 'py-1', 'px-2']

if (isCurrentPage(page)) {
classes.push('oc-pagination-list-item-current')
classes.push(...['oc-pagination-list-item-current', 'font-bold'])
} else if (page === '...') {
classes.push('oc-pagination-list-item-ellipsis')
} else {
Expand Down Expand Up @@ -171,14 +171,12 @@ const bindPageLink = (page: Page) => {
&:not(span):hover {
background-color: var(--oc-role-secondary);
color: var(--oc-role-on-secondary);
text-decoration: none;
}
}

&-current {
background-color: var(--oc-role-secondary);
color: var(--oc-role-on-secondary);
font-weight: bold;
}

&-prev,
Expand Down
5 changes: 1 addition & 4 deletions packages/design-system/src/components/OcTable/OcTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
v-if="field.sortable"
:aria-label="getSortLabel(field.name)"
appearance="raw"
class="oc-button-sort oc-width-1-1"
class="oc-button-sort oc-width-1-1 hover:underline"
gap-size="small"
no-hover
@click="handleSort(field)"
Expand Down Expand Up @@ -553,9 +553,6 @@ const handleSort = (field: FieldType) => {
.oc-button-sort {
display: flex;
justify-content: start;
&:hover {
text-decoration: underline;
}
.oc-icon {
&:hover {
background-color: var(--oc-role-surface-container);
Expand Down
10 changes: 8 additions & 2 deletions packages/design-system/src/components/OcTableTh/OcTableTh.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,17 @@ export interface Props {
const { alignH = 'left', alignV = 'middle', width = 'auto', wrap } = defineProps<Props>()
defineEmits(['click'])
</script>
<style>
@reference 'tailwindcss';

@layer components {
.oc-th {
@apply font-medium;
}
}
</style>
<style lang="scss">
.oc-th {
font-weight: inherit;

&[aria-sort] {
cursor: pointer;
}
Expand Down
1 change: 0 additions & 1 deletion packages/design-system/src/components/OcTag/OcTag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,6 @@ function $_ocTag_click(event: MouseEvent) {
box-sizing: border-box;
display: inline-flex;
gap: var(--oc-space-xsmall);
text-decoration: none;

&-m {
min-height: 2.125rem;
Expand Down
4 changes: 4 additions & 0 deletions packages/design-system/src/styles/layers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,10 @@
@apply p-1.5 leading-4;
}

.oc-select optgroup {
@apply font-bold;
}

.oc-textarea {
@apply py-1 px-2
}
Expand Down
6 changes: 0 additions & 6 deletions packages/design-system/src/styles/theme/helper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,6 @@
gap: var(--oc-space-small);
justify-content: flex-start;
width: 100%;

&:focus,
&:hover {
text-decoration: none;
}
}
}

Expand All @@ -136,6 +131,5 @@
display: inline-flex;
gap: 10px;
vertical-align: top;
text-decoration: none;
}
}
11 changes: 0 additions & 11 deletions packages/design-system/src/styles/theme/oc-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,17 +144,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%

.oc-select { text-transform: none; }

/*
* 1. Change font properties to `inherit` in all browsers
* 2. Don't inherit the `font-weight` and use `bold` instead.
* NOTE: Both declarations don't work in Chrome, Safari and Opera.
*/

.oc-select optgroup {
/* 2 */
font-weight: bold;
}

/*
* Remove the default vertical scrollbar in IE 10+.
*/
Expand Down
1 change: 0 additions & 1 deletion packages/design-system/src/styles/theme/oc-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ html * {

a {
color: var(--oc-role-secondary);
text-decoration: none;

&:hover {
color: var(--oc-role-on-surface);
Expand Down
2 changes: 1 addition & 1 deletion packages/web-app-activities/src/views/ActivityList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<oc-list class="activity-list">
<li v-for="(activityItems, date) in activitiesDateCategorized" :key="date" class="mb-6">
<h2
class="oc-text-bold oc-text-muted activity-list-date text-base"
class="font-semibold oc-text-muted activity-list-date text-base"
v-text="getDateHeadline(date)"
/>
<oc-list class="ml-2 mt-2 timeline">
Expand Down
2 changes: 1 addition & 1 deletion packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
class="selected-group-details p-1"
:aria-label="$gettext('Overview of the information about the selected group')"
>
<span class="pr-2 oc-font-semibold" v-text="$gettext('Group name')" />
<span class="pr-2 font-semibold" v-text="$gettext('Group name')" />
<span v-text="group.displayName" />
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<oc-text-input v-model="filterTerm" class="mr-2 mt-4" :label="$gettext('Filter members')" />
<div ref="membersListRef" data-testid="space-members">
<div v-if="!filteredGroupMembers.length">
<h3 class="oc-text-bold text-base" v-text="$gettext('No members found')" />
<h3 class="font-semibold text-base" v-text="$gettext('No members found')" />
</div>
<div v-if="filteredGroupMembers.length" class="mb-4" data-testid="group-members">
<h3 class="oc-text-bold text-base" v-text="$gettext('Members')" />
<h3 class="font-semibold text-base" v-text="$gettext('Members')" />
<members-role-section :group-members="filteredGroupMembers" />
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/web-app-admin-settings/src/components/Spaces/SideBar/MembersPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
<oc-text-input v-model="filterTerm" class="mr-2 mt-4" :label="$gettext('Filter members')" />
<div ref="membersListRef" data-testid="space-members">
<div v-if="!filteredPermissions.length">
<h3 class="oc-text-bold text-base" v-text="$gettext('No members found')" />
<h3 class="font-semibold text-base" v-text="$gettext('No members found')" />
</div>
<div v-for="(role, i) in availableRoles" :key="i">
<div
v-if="getPermissionsForRole(role).length"
class="mb-4"
:data-testid="`space-members-role-${role.displayName}`"
>
<h3 class="oc-text-bold text-base" v-text="role.displayName" />
<h3 class="font-semibold text-base" v-text="role.displayName" />
<members-role-section :permissions="getPermissionsForRole(role)" />
</div>
</div>
<div v-if="permissionsWithoutRole.length" class="space-members-custom">
<h3 class="oc-text-bold text-base" v-text="$gettext('Custom role')" />
<h3 class="font-semibold text-base" v-text="$gettext('Custom role')" />
<members-role-section :permissions="permissionsWithoutRole" />
</div>
</div>
Expand Down
12 changes: 0 additions & 12 deletions packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,16 +151,4 @@ export default defineComponent({
background-color: var(--oc-role-surface-container);
border-radius: 5px;
}

.details-table {
text-align: left;

tr {
height: 1.5rem;
}

th {
font-weight: 600;
}
}
</style>
Loading