Skip to content

Commit

Permalink
First batch of CSS var updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@pascalwengerter
pascalwengerter committed Dec 4, 2024
1 parent 360b350 commit 5e02921
Show file tree
Hide file tree
Showing 78 changed files with 211 additions and 217 deletions.
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default defineComponent({
align-items: center;
background-color: var(--oc-color-swatch-passive-default);
border-radius: 50%;
color: var(--oc-color-text-inverse);
color: var(--oc-color-inverseOnSurface);
display: flex;
justify-content: center;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default defineComponent({
iconColor: {
type: String,
required: false,
default: 'var(--oc-color-text-inverse)'
default: 'var(--oc-color-inverseOnSurface)'
},
/**
* Fill-type that should be used for the icon
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcAvatars/OcAvatars.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export default defineComponent({
.oc-avatar-count,
.oc-avatar + .oc-avatar-item,
.oc-avatar-item + .oc-avatar-item {
border: 1px solid var(--oc-color-text-inverse);
border: 1px solid var(--oc-color-inverseOnSurface);
margin-left: -25px;
}
}
Expand Down
20 changes: 8 additions & 12 deletions packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
/>
<oc-icon
v-if="index !== displayItems.length - 1"
color="var(--oc-color-text-default)"
color="var(--oc-color-onSurface)"
name="arrow-right-s"
class="oc-mx-xs"
fill-type="line"
Expand All @@ -73,7 +73,7 @@
:aria-label="contextMenuLabel"
appearance="raw"
>
<oc-icon name="more-2" color="var(--oc-color-text-default)" />
<oc-icon name="more-2" color="var(--oc-color-onSurface)" />
</oc-button>
<oc-drop
drop-id="oc-breadcrumb-contextmenu"
Expand Down Expand Up @@ -342,13 +342,9 @@ export default defineComponent({
.oc-breadcrumb {
overflow: visible;
&-item-dragover {
transition:
background 0.06s,
border 0s 0.08s,
border-color 0s,
border-width 0.06s;
background-color: var(--oc-color-background-highlight);
box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
background-color: var(--oc-color-surfaceBright);
box-shadow: 0 0 0 5px var(--oc-color-surfaceBright);
border-radius: 5px;
}
&-item-text {
Expand Down Expand Up @@ -396,12 +392,12 @@ export default defineComponent({
}
> :nth-child(n + 2)::before {
color: var(--oc-color-text-default);
color: var(--oc-color-onSurface);
display: inline-block;
}
> :last-child > span {
color: var(--oc-color-text-default);
color: var(--oc-color-onSurface);
}
}
Expand All @@ -411,7 +407,7 @@ export default defineComponent({
button:first-of-type,
span:first-of-type {
font-size: var(--oc-font-size-medium);
color: var(--oc-color-text-default);
color: var(--oc-color-onSurface);
display: inline-block;
vertical-align: sub;
line-height: normal;
Expand Down
30 changes: 15 additions & 15 deletions packages/design-system/src/components/OcButton/OcButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,16 +413,16 @@ export default defineComponent({
&-brand {
@include oc-button-variation(
var(--oc-color-swatch-brand-default),
var(--oc-color-swatch-brand-hover),
var(--oc-color-swatch-brand-muted),
var(--oc-color-swatch-brand-contrast)
var(--oc-color-primary),
var(--oc-color-primaryContainer),
var(--oc-color-primaryFixedDim),
var(--oc-color-background)
);
}
&-primary {
@include oc-button-variation(
var(--oc-color-swatch-primary-default),
var(--oc-color-primary),
var(--oc-color-swatch-primary-hover),
var(--oc-color-swatch-primary-muted),
var(--oc-color-swatch-primary-contrast)
Expand All @@ -449,25 +449,25 @@ export default defineComponent({
&-warning {
@include oc-button-variation(
var(--oc-color-swatch-warning-default),
var(--oc-color-swatch-warning-hover),
var(--oc-color-swatch-warning-muted),
var(--oc-color-swatch-warning-contrast)
var(--oc-color-error),
var(--oc-color-errorContainer),
var(--oc-color-onErrorContainer),
var(--oc-color-onError)
);
}
&-danger {
@include oc-button-variation(
var(--oc-color-swatch-danger-default),
var(--oc-color-error),
var(--oc-color-swatch-danger-hover),
var(--oc-color-swatch-danger-muted),
var(--oc-color-swatch-danger-contrast)
var(--oc-color-onError)
);
&-filled:hover {
color: var(--oc-color-swatch-danger-default) !important;
color: var(--oc-color-error) !important;
span > svg {
fill: var(--oc-color-swatch-danger-default) !important;
fill: var(--oc-color-error) !important;
}
}
}
Expand Down Expand Up @@ -502,12 +502,12 @@ export default defineComponent({
&:first-of-type {
// TODO: Implement color variations if button group should be used again
border-left: 1px solid var(--oc-color-swatch-primary-default);
border-left: 1px solid var(--oc-color-primary);
}
&:last-of-type {
// TODO: Implement color variations if button group should be used again
border-right: 1px solid var(--oc-color-swatch-primary-default);
border-right: 1px solid var(--oc-color-primary);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export default defineComponent({
}
&:focus-visible {
outline: var(--oc-color-swatch-primary-default) auto 1px;
outline: var(--oc-color-primary) auto 1px;
}
&-checked,
Expand Down
6 changes: 3 additions & 3 deletions packages/design-system/src/components/OcDrop/OcDrop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,8 @@ export default defineComponent({
const to = this.target
? document.querySelector(this.target)
: this.toggle
? document.querySelector(this.toggle)
: this.$el.previousElementSibling
? document.querySelector(this.toggle)
: this.$el.previousElementSibling
const content = this.$refs.drop
if (!to || !content) {
Expand Down Expand Up @@ -285,7 +285,7 @@ export default defineComponent({
}
&:hover span {
color: var(--oc-color-swatch-brand-hover) !important;
color: var(--oc-color-primaryContainer) !important;
}
span {
Expand Down
4 changes: 2 additions & 2 deletions packages/design-system/src/components/OcDropzone/OcDropzone.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export default defineComponent({
<style lang="scss">
.oc-dropzone {
align-items: center;
background-color: var(--oc-color-background-default);
background-color: var(--oc-color-background);
border: 1px dashed var(--oc-color-swatch-primary-muted);
color: var(--oc-color-text-default);
color: var(--oc-color-onSurface);
display: flex;
font-size: 1.5rem;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default defineComponent({
resize: none;
label {
color: var(--oc-color-text-muted);
color: var(--oc-color-onSurfaceVariant);
}
}
Expand Down
18 changes: 9 additions & 9 deletions packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
:class="filterActive ? 'oc-filter-check-icon-active' : 'oc-filter-check-icon-inactive'"
name="check"
size="small"
color="var(--oc-color-text-inverse)"
color="var(--oc-color-inverseOnSurface)"
/>
<span
class="oc-text-truncate oc-filter-chip-label"
Expand Down Expand Up @@ -44,7 +44,7 @@
:aria-label="$gettext('Clear filter')"
@click="$emit('clearFilter')"
>
<oc-icon name="close" size="small" color="var(--oc-color-text-inverse)" />
<oc-icon name="close" size="small" color="var(--oc-color-inverseOnSurface)" />
</oc-button>
</div>
</template>
Expand Down Expand Up @@ -134,9 +134,9 @@ export default defineComponent({
.oc-filter-chip {
&-button.oc-pill {
align-items: center;
background-color: var(--oc-color-background-default) !important;
color: var(--oc-color-text-muted) !important;
border: 1px solid var(--oc-color-text-muted);
background-color: var(--oc-color-background) !important;
color: var(--oc-color-onSurfaceVariant) !important;
border: 1px solid var(--oc-color-onSurfaceVariant);
box-sizing: border-box;
display: inline-flex;
gap: var(--oc-space-xsmall);
Expand All @@ -149,8 +149,8 @@ export default defineComponent({
}
&-button-selected.oc-pill,
&-button-selected.oc-pill:hover {
background-color: var(--oc-color-swatch-primary-default) !important;
color: var(--oc-color-text-inverse) !important;
background-color: var(--oc-color-primary) !important;
color: var(--oc-color-inverseOnSurface) !important;
border-top-left-radius: 99px !important;
border-bottom-left-radius: 99px !important;
border-top-right-radius: 0px !important;
Expand All @@ -159,8 +159,8 @@ export default defineComponent({
}
&-clear,
&-clear:hover {
background-color: var(--oc-color-swatch-primary-default) !important;
color: var(--oc-color-text-inverse) !important;
background-color: var(--oc-color-primary) !important;
color: var(--oc-color-inverseOnSurface) !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 99px !important;
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcGrid/OcGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -546,7 +546,7 @@ $grid-divider-border: #e5e5e5 !default;
<oc-grid>
<div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-passive-default)" class="oc-height-small"></div>
<div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-success-default)" class="oc-height-small"></div>
<div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-warning-default)" class="oc-height-small"></div>
<div style="width: 80px; height: 80px; background-color: var(--oc-color-error)" class="oc-height-small"></div>
</oc-grid>

<h3 class="oc-heading-divider">
Expand Down
8 changes: 4 additions & 4 deletions packages/design-system/src/components/OcIcon/OcIcon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,27 +267,27 @@ export default defineComponent({
}
&-primary > svg {
fill: var(--oc-color-swatch-primary-default);
fill: var(--oc-color-primary);
}
&-passive > svg {
fill: var(--oc-color-swatch-passive-default);
}
&-warning > svg {
fill: var(--oc-color-swatch-warning-default);
fill: var(--oc-color-error);
}
&-success > svg {
fill: var(--oc-color-swatch-success-default);
}
&-danger > svg {
fill: var(--oc-color-swatch-danger-default);
fill: var(--oc-color-error);
}
&-brand > svg {
fill: var(--oc-color-swatch-brand-default);
fill: var(--oc-color-primary);
}
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export default defineComponent({
}
.info-drop-content {
font-size: var(--oc-font-size-medium);
color: var(--oc-color-text-default);
color: var(--oc-color-onSurface);
}
.info-more-link {
font-size: var(--oc-font-size-medium) !important;
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcLoader/OcLoader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default defineComponent({
}
&::after {
background: var(--oc-color-text-muted);
background: var(--oc-color-onSurfaceVariant);
content: '';
height: 100%;
width: 0;
Expand Down
14 changes: 7 additions & 7 deletions packages/design-system/src/components/OcModal/OcModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,7 @@ export default defineComponent({
}
.oc-modal {
background-color: var(--oc-color-background-default);
background-color: var(--oc-color-background);
border: 1px solid var(--oc-color-input-border);
border-radius: 15px;
box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
Expand Down Expand Up @@ -460,19 +460,19 @@ export default defineComponent({
}
&-primary {
@include oc-modal-variation(var(--oc-color-swatch-primary-default));
@include oc-modal-variation(var(--oc-color-primary));
}
&-success {
@include oc-modal-variation(var(--oc-color-swatch-success-default));
}
&-warning {
@include oc-modal-variation(var(--oc-color-swatch-warning-default));
@include oc-modal-variation(var(--oc-color-error));
}
&-danger {
@include oc-modal-variation(var(--oc-color-swatch-danger-default));
@include oc-modal-variation(var(--oc-color-error));
}
&-title {
Expand All @@ -497,7 +497,7 @@ export default defineComponent({
}
&-body {
color: var(--oc-color-text-default);
color: var(--oc-color-onSurface);
line-height: 1.625;
padding: var(--oc-space-medium) var(--oc-space-medium) 0;
Expand Down Expand Up @@ -526,7 +526,7 @@ export default defineComponent({
&-actions {
text-align: right;
background: var(--oc-color-background-default);
background: var(--oc-color-background);
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
padding: var(--oc-space-medium);
Expand All @@ -545,7 +545,7 @@ export default defineComponent({
.oc-text-input-password-wrapper {
button {
background-color: var(--oc-color-background-highlight) !important;
background-color: var(--oc-color-surfaceBright) !important;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export default defineComponent({

<style lang="scss">
.oc-notification-message {
background-color: var(--oc-color-background-default) !important;
background-color: var(--oc-color-background) !important;
margin-top: var(--oc-space-small);
position: relative;
word-break: break-word;
Expand Down
Loading

0 comments on commit 5e02921

Please sign in to comment.