Merge branch 'main' into fix/1615-vitepress-timestamp

.changeset/pre.json

@@ -265,11 +265,13 @@
     "tall-tables-bow",
     "tame-adults-cheat",
     "tame-months-sniff",
+    "ten-hairs-bake",
     "ten-islands-bake",
     "ten-pigs-beg",
     "ten-scissors-boil",
     "tender-chairs-clap",
     "thick-gorillas-work",
+    "thick-terms-serve",
     "thin-badgers-compare",
     "thin-penguins-pretend",
     "thin-shrimps-care",

.changeset/ten-hairs-bake.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": patch
+---
+
+fix(button): make background transparent for `mode="plain"`

.changeset/thick-terms-serve.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+fix(OnyxBorderRadiusTokens): Fix background color

apps/demo-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # demo-app
 
+## 1.0.0-beta.38
+
+### Patch Changes
+
+- Updated dependencies [d4fe7d1]
+  - sit-onyx@1.0.0-beta.38
+
 ## 1.0.0-beta.37
 
 ### Patch Changes

apps/demo-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "demo-app",
   "private": true,
-  "version": "1.0.0-beta.37",
+  "version": "1.0.0-beta.38",
   "type": "module",
   "scripts": {
     "dev": "turbo run vite --filter demo-app",

apps/docs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # docs
 
+## 1.0.0-beta.2
+
+### Patch Changes
+
+- da2523f: fix(OnyxBorderRadiusTokens): Fix background color
+
 ## 1.0.0-beta.1
 
 ### Patch Changes

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "type": "module",
   "private": true,
   "scripts": {

apps/docs/src/.vitepress/components/OnyxBorderRadiusTokens.vue

@@ -41,7 +41,7 @@ const tokens = [
     border-width: var(--onyx-1px-in-rem) var(--onyx-1px-in-rem) var(--onyx-1px-in-rem) 0;
     border-color: var(--onyx-color-base-warning-500);
     border-style: solid;
-    background: var(--onyx-color-base-neutral-100);
+    background: var(--onyx-color-base-background-tinted);
     margin: 0;
     box-sizing: border-box;
 

apps/playground/CHANGELOG.md

@@ -1,5 +1,12 @@
 # playground
 
+## 1.0.0-beta.38
+
+### Patch Changes
+
+- Updated dependencies [d4fe7d1]
+  - sit-onyx@1.0.0-beta.38
+
 ## 1.0.0-beta.37
 
 ### Patch Changes

apps/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "1.0.0-beta.37",
+  "version": "1.0.0-beta.38",
   "description": "Playground for the onyx Vue components",
   "type": "module",
   "author": "Schwarz IT KG",

package.json

@@ -36,7 +36,7 @@
     "@storybook/vue3-vite": "^8.2.9",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.16.1",
+    "@types/node": "^20.16.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/compiler-dom": "^3.4.38",
@@ -60,7 +60,7 @@
     "typescript": "~5.5.4",
     "vite": "^5.4.2",
     "vitest": "^2.0.5",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.2"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

packages/chartjs-plugin/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-beta.38
+
+### Patch Changes
+
+- Updated dependencies [d4fe7d1]
+  - sit-onyx@1.0.0-beta.38
+
 ## 1.0.0-beta.37
 
 ### Patch Changes

packages/chartjs-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-beta.37",
+  "version": "1.0.0-beta.38",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/nuxt/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-beta.39
+
+### Patch Changes
+
+- Updated dependencies [d4fe7d1]
+  - sit-onyx@1.0.0-beta.38
+
 ## 1.0.0-beta.38
 
 ### Patch Changes

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-beta.38",
+  "version": "1.0.0-beta.39",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/sit-onyx/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sit-onyx
 
+## 1.0.0-beta.38
+
+### Patch Changes
+
+- d4fe7d1: fix(button): make background transparent for `mode="plain"`
+
 ## 1.0.0-beta.37
 
 ### Minor Changes

packages/sit-onyx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-beta.37",
+  "version": "1.0.0-beta.38",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -51,6 +51,6 @@
     "@axe-core/playwright": "^4.10.0",
     "@sit-onyx/headless": "workspace:^",
     "eslint-plugin-vue-scoped-css": "^2.8.1",
-    "vue-component-type-helpers": "^2.0.29"
+    "vue-component-type-helpers": "^2.1.2"
   }
 }

packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue

@@ -64,10 +64,9 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
 
 .onyx-button {
   @include layers.component() {
-    --onyx-button-background-color: var(--onyx-color-base-background-tinted);
-    --onyx-ripple-color: var(--onyx-color-base-background-tinted);
+    --onyx-button-background-color: transparent;
     --onyx-button-background-hover-color: var(--onyx-color-base-primary-100);
-    --onyx-button-border-color: var(--onyx-color-base-background-tinted);
+    --onyx-button-border-color: transparent;
     --onyx-button-text-color: var(--onyx-color-text-icons-primary-intense);
     --onyx-button-outline-color: var(--onyx-color-base-primary-200);
     --onyx-button-border-width: var(--onyx-1px-in-rem);
@@ -95,7 +94,6 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
 
       &.onyx-button--default {
         --onyx-button-background-color: var(--onyx-color-base-primary-500);
-        --onyx-ripple-color: var(--onyx-color-base-primary-500);
         --onyx-button-background-hover-color: var(--onyx-color-base-primary-400);
         --onyx-button-text-color: var(--onyx-color-text-icons-neutral-inverted);
         --onyx-button-border-color: var(--onyx-color-base-primary-500);
@@ -127,7 +125,6 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
 
       &.onyx-button--default {
         --onyx-button-background-color: var(--onyx-color-base-background-blank);
-        --onyx-ripple-color: var(--onyx-color-base-background-blank);
         --onyx-button-background-hover-color: var(--onyx-color-base-neutral-200);
         --onyx-button-border-color: var(--onyx-color-base-neutral-400);
 
@@ -157,7 +154,6 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
 
       &.onyx-button--default {
         --onyx-button-background-color: var(--onyx-color-base-danger-200);
-        --onyx-ripple-color: var(--onyx-color-base-danger-200);
         --onyx-button-background-hover-color: var(--onyx-color-base-danger-100);
         --onyx-button-border-color: var(--onyx-color-base-danger-500);
 
@@ -176,7 +172,7 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
       }
     }
 
-    &:hover:enabled {
+    &:hover:enabled:not(:has(.onyx-ripple__element)) {
       --onyx-button-background-color: var(--onyx-button-background-hover-color);
     }
 
@@ -216,5 +212,9 @@ const rippleEvents = computed(() => rippleRef.value?.events ?? {});
     display: inline-block;
     vertical-align: middle;
   }
+
+  .onyx-ripple {
+    --onyx-ripple-color: var(--onyx-button-background-hover-color);
+  }
 }
 </style>

packages/sit-onyx/src/components/OnyxRipple/OnyxRipple.vue

@@ -1,14 +1,9 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import { useRipple, type RippleConfig } from "../../composables/useRipple";
+import { ref } from "vue";
+import { useRipple } from "../../composables/useRipple";
 
 const rippleTrigger = ref<HTMLElement>();
-
-const config = computed<RippleConfig>(() => ({
-  container: rippleTrigger,
-}));
-
-const { ripples, hideRipple, events } = useRipple(config);
+const { ripples, hideRipple, events } = useRipple(rippleTrigger);
 
 defineExpose({
   events,
@@ -17,68 +12,68 @@ defineExpose({
 
 <template>
   <span ref="rippleTrigger" class="onyx-ripple" aria-hidden="true">
-    <transition-group name="onyx-ripple" @after-enter="hideRipple($event as HTMLElement)">
-      <span
-        v-for="[key, r] in ripples"
-        :key="key"
-        class="onyx-ripple__element"
-        :style="{
-          left: r.left,
-          top: r.top,
-          width: r.radius,
-          height: r.radius,
-        }"
-        :data-rippleid="key"
-      ></span>
-    </transition-group>
+    <span
+      v-for="[key, ripple] in ripples"
+      :key="key"
+      class="onyx-ripple__element"
+      :style="{
+        '--onyx-ripple-left': ripple.left,
+        '--onyx-ripple-top': ripple.top,
+      }"
+      :data-rippleid="key"
+      @animationend="hideRipple($event.target as HTMLElement)"
+    ></span>
   </span>
 </template>
 
 <style lang="scss">
 @use "../../styles/mixins/layers.scss";
 
+@property --onyx-ripple-radius {
+  syntax: "<percentage>";
+  initial-value: 0%;
+  inherits: false;
+}
+
 .onyx-ripple {
   @include layers.component() {
+    --onyx-ripple-color: var(--onyx-color-base-primary-600);
+
     display: block;
     position: absolute;
     inset: 0;
     overflow: hidden;
     border-radius: inherit;
+    width: 100%;
+    height: 100%;
 
     &__element {
       display: block;
       position: absolute;
-      border-radius: 50%;
       pointer-events: none;
-      background-color: var(--onyx-ripple-color, var(--onyx-color-base-primary-600));
-      transition:
-        opacity,
-        transform 0ms cubic-bezier(0, 0, 0.2, 1);
-    }
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(
+        circle at var(--onyx-ripple-left) var(--onyx-ripple-top),
+        transparent var(--onyx-ripple-radius),
+        var(--onyx-ripple-color) var(--onyx-ripple-radius)
+      );
 
-    &-enter-active,
-    &-leave-active {
-      transition-property: opacity, scale;
-      transition-timing-function: ease;
-      transition-duration: var(--onyx-duration-sm);
-      @media (prefers-reduced-motion) {
-        transition-duration: 1ms;
-      }
-    }
+      animation: onyx-ripple var(--onyx-duration-sm) cubic-bezier(0, 0, 0.2, 1) forwards;
 
-    &-leave-active {
-      transition-duration: 100ms;
       @media (prefers-reduced-motion) {
-        transition-duration: 1ms;
+        animation: none;
       }
     }
 
-    &-enter-from {
-      scale: 0;
-    }
+    @keyframes onyx-ripple {
+      0% {
+        --onyx-ripple-radius: 0%;
+      }
 
-    &-leave-to {
-      opacity: 0;
+      100% {
+        --onyx-ripple-radius: 100%;
+      }
     }
   }
 }

packages/sit-onyx/src/components/OnyxRipple/RippleTestWrapper.vue

@@ -19,8 +19,8 @@ button {
   height: 16rem;
   width: 16rem;
 
-  :deep(.onyx-ripple-enter-active) {
-    transition-duration: 5s;
+  :deep(.onyx-ripple__element) {
+    animation-duration: 5s;
   }
 }
 </style>