Skip to content

chore(css): moves all our sass usage to CSS props via XTheme #4623

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

Open
johncowen wants to merge 10 commits into
base: master
Choose a base branch
from
Open

chore(css): moves all our sass usage to CSS props via XTheme #4623

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3392537
chore(css): moves all our sass usage to CSS props via XTheme
johncowen Feb 17, 2026
22b6d04
human amends
johncowen Feb 17, 2026
ae10a52
remove unnecessary SASS var
johncowen Feb 19, 2026
dfd6461
unnest and move remaining root level SASS vars to XLayout
johncowen Feb 19, 2026
35bf2bc
adds mostly AI generated README
johncowen Feb 19, 2026
c0f4c1b
delete plan from PR
johncowen Feb 19, 2026
b707915
last few stray non-tokenized colors
johncowen Feb 20, 2026
88e3ea2
remove fullscreen/no-navigation and move/remove _variables
johncowen Feb 20, 2026
9ecc709
a few more $kuis
johncowen Feb 23, 2026
55ad8e9
reorder tokens and a couple of amends
johncowen Feb 23, 2026
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
8 changes: 4 additions & 4 deletions packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,14 +142,14 @@ onMounted(rewrite)
.app-collection :deep(td :is(a, button)[data-action]) {
&, > * {
color: inherit;
font-weight: $kui-font-weight-semibold;
font-weight: var(--x-font-weight-semibold);
text-decoration: none;
}
}

.app-collection :deep(td:first-child li a) {
color: $kui-color-text-primary;
font-weight: $kui-font-weight-regular;
color: var(--x-color-text-primary);
font-weight: var(--x-font-weight-regular);
}


Expand All @@ -164,6 +164,6 @@ onMounted(rewrite)
}

.app-collection .is-selected {
background-color: $kui-color-background-neutral-weakest;
background-color: var(--x-color-background-neutral-weakest);
}
</style>
2 changes: 1 addition & 1 deletion packages/kuma-gui/src/app/application/components/app-navigator/AppNavigator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const props = withDefaults(defineProps<{
&::before {
content: '';
animation-name: var(--icon-name-start), icon-size-40;
margin-right: $kui-space-40;
margin-right: var(--x-space-40);
}
}
</style>
29 changes: 4 additions & 25 deletions packages/kuma-gui/src/app/application/components/app-view/AppView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,14 @@
/>
</nav>

<section
:class="{
'is-fullscreen': props.fullscreen,
}"
>
<section>
<XLayout
type="stack"
>
<header
v-if="slots.title || slots.actions"
class="app-view-title-bar"
>
<KongIcon v-if="props.fullscreen" />

<template
v-if="summary.length > 0"
>
Expand Down Expand Up @@ -143,7 +137,6 @@
</template>

<script lang="ts" setup>
import { KongIcon } from '@kong/icons'
import { ROUTE_VIEW_PARENT } from '@kumahq/routing/vue'
import { nextTick , provide, inject, watch, ref, onBeforeUnmount , useId } from 'vue'

Expand All @@ -162,12 +155,10 @@ type Breadcrumbs = Map<symbol, BreadcrumbItem[]>

const props = withDefaults(defineProps<{
breadcrumbs?: BreadcrumbItem[] | null
fullscreen?: boolean
docs?: string
notifications?: boolean
}>(), {
breadcrumbs: null,
fullscreen: false,
docs: '',
notifications: false,
})
Expand Down Expand Up @@ -238,26 +229,14 @@ onBeforeUnmount(() => {
position: relative;
left: -3px;
}
.is-fullscreen {
.app-view-title-bar {
padding: $kui-space-80 $kui-space-90;
border-bottom: $kui-border-width-10 solid $kui-color-border;
}
.app-view-title-bar h1 {
margin-left: $kui-space-40;
padding-left: $kui-space-40;
border-left: $kui-border-width-10 solid $kui-color-border;
font-size: $kui-font-size-60;
}
}
.k-tabs + .route-view > .app-view .app-view-title-bar {
margin-bottom: 20px;
}
</style>

<style lang="scss" scoped>
.app-view {
font-size: $kui-font-size-30;
font-size: var(--x-font-size-30);
}
.app-view-title-bar {
display: flex;
Expand All @@ -273,13 +252,13 @@ onBeforeUnmount(() => {
display: flex;
justify-content: flex-end;
align-items: center;
gap: $kui-space-60;
gap: var(--x-space-60);
}
.notifications {
padding: 0;
}
.notifications li {
margin-left: $kui-space-60;
margin-left: var(--x-space-60);
}
.notifications li:only-child {
list-style-type: none;
Expand Down
14 changes: 7 additions & 7 deletions packages/kuma-gui/src/app/common/AccordionItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ function end(element: Element) {
<style lang="scss" scoped>
.accordion-item {
position: relative;
border-bottom: $kui-border-width-10 solid $kui-color-border;
border-bottom: var(--x-border-width-10) solid var(--x-color-border);
}

.accordion-item:last-child {
Expand All @@ -132,9 +132,9 @@ function end(element: Element) {
display: block;
width: 100%;
text-align: left;
padding-top: $kui-space-40;
padding-bottom: $kui-space-40;
padding-right: $kui-space-60;
padding-top: var(--x-space-40);
padding-bottom: var(--x-space-40);
padding-right: var(--x-space-60);

&::after {
position: absolute;
Expand All @@ -150,13 +150,13 @@ function end(element: Element) {
}

.active .accordion-item-header::after {
margin-left: $kui-space-50;
margin-left: var(--x-space-50);
transform: rotate(-180deg) translateY(-50%);
top: calc(50% - 4px);
}

.accordion-item-content {
padding-top: $kui-space-40;
padding-bottom: $kui-space-40;
padding-top: var(--x-space-40);
padding-bottom: var(--x-space-40);
}
</style>
8 changes: 4 additions & 4 deletions packages/kuma-gui/src/app/common/DefinitionCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const slots = defineSlots()
<style lang="scss" scoped>
.definition-card {
display: flex;
gap: $kui-space-40;
gap: var(--x-space-40);
}

.definition-card--horizontal {
Expand All @@ -56,18 +56,18 @@ const slots = defineSlots()
.definition-card-title {
display: flex;
align-items: center;
gap: $kui-space-40;
gap: var(--x-space-40);
}

.definition-card-container {
display: flex;
align-items: flex-start;
font-weight: $kui-font-weight-bold;
font-weight: var(--x-font-weight-bold);
}

.definition-card--vertical .definition-card-container {
flex-grow: 1;
font-size: $kui-font-size-60;
font-size: var(--x-font-size-60);
}
</style>

Expand Down
8 changes: 4 additions & 4 deletions packages/kuma-gui/src/app/common/ResourceStatus.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ const slots = defineSlots()

<style lang="scss" scoped>
.text-neutral {
color: #{$kui-color-text-neutral};
color: var(--x-color-text-neutral);
}
.description {
font-weight: $kui-font-weight-regular;
font-size: $kui-font-size-20;
font-weight: var(--x-font-weight-regular);
font-size: var(--x-font-size-20);
display: flex;
gap: $kui-space-20;
gap: var(--x-space-20);
}
</style>
4 changes: 2 additions & 2 deletions packages/kuma-gui/src/app/common/StatusBadge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ const props = defineProps<{
.status {
align-items: center;
white-space: nowrap;
font-weight: $kui-font-weight-medium;
font-weight: var(--x-font-weight-medium);
}

.status::before {
content: '';
display: inline-block;
vertical-align: middle;
margin-right: $kui-space-20;
margin-right: var(--x-space-20);
border: 4px solid currentColor;
border-radius: 50%;
}
Expand Down
10 changes: 5 additions & 5 deletions packages/kuma-gui/src/app/common/TagList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,14 +103,14 @@ function getRoute(tag: LabelValue): RouteLocationNamedRaw | undefined {
[data-kv-owner$='.kuma.io'],
[data-kv-owner^='kuma.io']
)) {
background-color: $kui-color-background-neutral-weaker !important;
color: $kui-color-text-neutral-strong !important;
background-color: var(--x-color-background-neutral-weaker) !important;
color: var(--x-color-text-neutral-strong) !important;
}

.tag-list {
display: inline-flex;
flex-wrap: wrap;
gap: $kui-space-40;
gap: var(--x-space-40);
}

.tag-list--align-right,
Expand All @@ -125,9 +125,9 @@ function getRoute(tag: LabelValue): RouteLocationNamedRaw | undefined {
text-decoration: underline;
}
.tag :deep(span.label) {
font-weight: $kui-font-weight-regular;
font-weight: var(--x-font-weight-regular);
}
.tag :deep(span.value) {
font-weight: $kui-font-weight-semibold;
font-weight: var(--x-font-weight-semibold);
}
</style>
6 changes: 3 additions & 3 deletions packages/kuma-gui/src/app/common/TargetRef.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,13 @@ const routeTarget = computed<Omit<RouteLocationNamedRaw, 'query'> | null>(() =>
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: $kui-space-40;
gap: var(--x-space-40);
}

.weight {
display: inline-flex;
align-items: center;
gap: $kui-space-20;
color: $kui-color-text-neutral;
gap: var(--x-space-20);
color: var(--x-color-text-neutral);
}
</style>
18 changes: 9 additions & 9 deletions packages/kuma-gui/src/app/common/data-card/DataCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
</template>
<style lang="scss" scoped>
.data-card {
padding: $kui-space-50;
padding: var(--x-space-50);
}
.data-card :deep(.card-content) {
font-size: $kui-font-size-20;
font-size: var(--x-font-size-20);
}
.card {
overflow: hidden;
Expand All @@ -29,28 +29,28 @@
.body {
display: flex;
flex-wrap: wrap;
gap: $kui-space-40;
gap: var(--x-space-40);
align-items: flex-start;
}
.body > :deep(dl) {
column-gap: $kui-space-80;
column-gap: var(--x-space-80);
}
.body,
.card {
flex-direction: column;
}
.title {
font-weight: $kui-font-weight-semibold;
font-size: $kui-font-size-60;
font-weight: var(--x-font-weight-semibold);
font-size: var(--x-font-size-60);
width: 100%;
}
.body > :deep(dl) > div {
column-gap: $kui-space-20;
column-gap: var(--x-space-20);
> dt {
color: $kui-color-text-disabled;
color: var(--x-color-text-disabled);
}
> dd {
color: $kui-color-text;
color: var(--x-color-text);
}
}
</style>
8 changes: 4 additions & 4 deletions packages/kuma-gui/src/app/connections/components/connection-traffic/ConnectionCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,16 +189,16 @@ const props = withDefaults(defineProps<{
<style lang="scss" scoped>
.aside {
float: right;
margin-bottom: $kui-space-40;
margin-left: $kui-space-40;
margin-bottom: var(--x-space-40);
margin-left: var(--x-space-40);
}
.title {
float: left;
font-size: $kui-font-size-40;
font-size: var(--x-font-size-40);
display: flex;
align-items: center;
flex: 1 1 auto;
gap: $kui-space-40;
gap: var(--x-space-40);
}
.protocol {
align-self: start;
Expand Down
13 changes: 6 additions & 7 deletions packages/kuma-gui/src/app/connections/components/connection-traffic/ConnectionGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,17 @@ const props = defineProps<{
<style lang="scss" scoped>
.type-passthrough,
.type-outbound {
padding: $kui-space-40;
border-radius: $kui-border-radius-40;
padding: var(--x-space-40);
border-radius: var(--x-border-radius-40);
}
.service-traffic-group {
&.type-passthrough {
/* TODO(jc): This border color is in the design but doesn't seem to be in @kong/design-tokens */
border-color: #00D6A4; // $kui-color-green-40;
background-color: $kui-color-background-success-weakest;
border-color: var(--x-color-green-40);
background-color: var(--x-color-background-success-weakest);
}
&.type-outbound {
border-color: $kui-color-border-primary-weak;
background-color: $kui-color-background-primary-weakest;
border-color: var(--x-color-border-primary-weak);
background-color: var(--x-color-background-primary-weakest);
}
&.type-inbound {
padding: 0;
Expand Down
Loading