feat(theme): implement updated border radius variables

.changeset/public-planes-cry.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: implemented new radius-component variabels

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

@@ -92,7 +92,7 @@ defineSlots<{
     display: inline-block;
     max-width: 100%;
     padding: var(--onyx-density-3xs) var(--onyx-density-sm);
-    border-radius: var(--onyx-radius-full);
+    border-radius: var(--onyx-radius-component-badge);
     background-color: var(--onyx-badge-background-color);
     color: var(--onyx-color-text-icons-neutral-inverted);
     font-family: var(--onyx-font-family-paragraph);

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

@@ -121,7 +121,7 @@ defineExpose({
 .onyx-basic-dialog {
   @include layers.component() {
     --onyx-basic-dialog-screen-gap: var(--onyx-grid-margin);
-    --onyx-basic-dialog-border-radius: var(--onyx-radius-md);
+    --onyx-basic-dialog-border-radius: var(--onyx-radius-component-flyout);
     --onyx-basic-dialog-padding: var(--onyx-density-md) var(--onyx-density-lg);
     outline: none;
     border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);

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

@@ -240,7 +240,7 @@ const popoverStyles = computed(() => {
 
     &__dialog {
       position: fixed;
-      border-radius: var(--onyx-radius-md);
+      border-radius: var(--onyx-radius-component-flyout);
       border: none;
       outline: none;
       box-shadow: var(--onyx-shadow-medium-bottom);

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

@@ -91,7 +91,7 @@ const rippleEvents = computed(() => ripple.value?.events ?? {});
     --onyx-button-border-color-disabled: transparent;
     --onyx-button-outline-color: var(--onyx-color-component-focus-primary);
     --onyx-button-border-width: var(--onyx-1px-in-rem);
-    --onyx-button-border-radius: var(--onyx-radius-sm);
+    --onyx-button-border-radius: var(--onyx-radius-component-button);
 
     &--primary {
       &.onyx-button--default {

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

@@ -180,7 +180,7 @@ useAutofocus(input, props);
       display: inline-flex;
       align-items: flex-start;
       padding: var(--onyx-checkbox-input-padding);
-      border-radius: var(--onyx-radius-full);
+      border-radius: var(--onyx-radius-component-checkbox);
     }
 
     &__label {

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

@@ -162,7 +162,7 @@ const popoverLayoutProps = useForwardProps(props, MaybePopoverLayout);
 .onyx-form-element-v2 {
   @include layers.component() {
     --onyx-form-element-v2-gap: var(--onyx-density-3xs);
-    --onyx-form-element-v2-border-radius: var(--onyx-radius-sm);
+    --onyx-form-element-v2-border-radius: var(--onyx-radius-component-input);
     --onyx-form-element-v2-border-size: var(--onyx-1px-in-rem);
     --onyx-form-element-v2-border-color: var(--onyx-color-component-border-neutral);
     --onyx-form-element-v2-border-color-hover: var(--onyx-color-component-border-primary-hover);

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

@@ -68,7 +68,7 @@ defineSlots<{
     $size: calc(1.5rem + 2 * var(--onyx-icon-button-padding));
     height: $size;
     width: $size;
-    border-radius: var(--onyx-radius-full);
+    border-radius: var(--onyx-radius-component-icon-button);
   }
 }
 
@@ -89,7 +89,7 @@ defineSlots<{
     border: none;
     background: none;
 
-    border-radius: var(--onyx-radius-full);
+    border-radius: var(--onyx-radius-component-icon-button);
     background-color: var(--icon-button-bg-color);
 
     &:hover,

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

@@ -63,7 +63,7 @@ const handleChange = (value: TValue) => {
     gap: var(--onyx-density-xs);
     padding: var(--onyx-density-2xs);
     background-color: var(--onyx-color-base-neutral-200);
-    border-radius: var(--onyx-radius-md);
+    border-radius: var(--onyx-radius-component-segmented-control-outside);
     overflow: auto;
     max-width: 100%;
 

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

@@ -58,7 +58,7 @@ useAutofocus(input, props);
   @include layers.component() {
     box-sizing: border-box;
     background-color: var(--onyx-color-base-neutral-200);
-    border-radius: var(--onyx-radius-sm);
+    border-radius: var(--onyx-radius-component-segmented-control-inside);
     color: var(--onyx-color-text-icons-neutral-medium);
     font-weight: var(--onyx-font-weight-regular);
     font-family: var(--onyx-font-family-paragraph);

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

@@ -14,7 +14,7 @@ onMounted(() => requestAnimationSync("onyx-skeleton"));
 
 .onyx-skeleton {
   @include layers.component() {
-    border-radius: var(--onyx-radius-sm);
+    border-radius: var(--onyx-radius-component-skeleton);
     pointer-events: none;
 
     // inherit size by default if not set explicitly

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

@@ -77,7 +77,7 @@ const skeleton = useSkeletonContext(props);
     font-family: var(--onyx-font-family-paragraph);
     color: var(--color);
     background-color: var(--background-color);
-    border-radius: var(--onyx-radius-sm);
+    border-radius: var(--onyx-radius-component-system-button);
     border: none;
     padding: 0;
     height: var(--height);

packages/sit-onyx/src/styles/mixins/input.scss

@@ -23,15 +23,14 @@
 
 @mixin define-shared-styles($base-selector, $vertical-padding) {
   --border-color: var(--onyx-color-component-border-neutral);
-  --border-radius: var(--onyx-radius-sm);
+  --border-radius: var(--onyx-radius-component-input);
   --hover-border-color: var(--onyx-color-component-border-primary-hover);
   --selection-color: var(--onyx-color-base-primary-200);
   --caret-color: var(--onyx-color-component-cta-default);
   --background-color: var(--onyx-color-base-background-blank);
   --outline-color: var(--onyx-color-component-focus-primary);
   --outline-style: none;
   --button-color: var(--onyx-color-text-icons-neutral-soft);
-  --border-radius: var(--onyx-radius-sm);
   --border-style: solid;
   --padding-horizontal: var(--onyx-density-sm);
 

packages/sit-onyx/src/styles/variables/density-compact.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "compact" theme.
- * Imported from Figma API on Fri, 19 Dec 2025 11:05:01 GMT
+ * Imported from Figma API on Fri, 27 Mar 2026 07:45:27 GMT
  */
 .onyx-density-compact {
   --onyx-density-2xl: var(--onyx-number-spacing-600);

packages/sit-onyx/src/styles/variables/density-cozy.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "cozy" theme.
- * Imported from Figma API on Fri, 19 Dec 2025 11:05:01 GMT
+ * Imported from Figma API on Fri, 27 Mar 2026 07:45:27 GMT
  */
 .onyx-density-cozy {
   --onyx-density-2xl: var(--onyx-number-spacing-800);

packages/sit-onyx/src/styles/variables/density-default.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "default" theme.
- * Imported from Figma API on Fri, 19 Dec 2025 11:04:47 GMT
+ * Imported from Figma API on Fri, 27 Mar 2026 07:45:15 GMT
  */
 :where(:root),
 .onyx-density-default {

packages/sit-onyx/src/styles/variables/spacing.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "spacing" theme.
- * Imported from Figma API on Fri, 19 Dec 2025 11:04:35 GMT
+ * Imported from Figma API on Fri, 27 Mar 2026 07:45:05 GMT
  */
 :where(:root) {
   --onyx-spacing-2xl: var(--onyx-number-spacing-700);

packages/sit-onyx/src/styles/variables/themes/onyx.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "onyx" theme.
- * Imported from Figma API on Fri, 19 Dec 2025 11:04:23 GMT
+ * Imported from Figma API on Fri, 27 Mar 2026 07:44:54 GMT
  */
 :where(:root),
 .onyx-theme-default {
@@ -410,7 +410,6 @@
     var(--onyx-color-system-orange-900)
   );
   --onyx-font-family-data: var(--onyx-font-family-Source-Sans-3-Variable);
-  --onyx-font-family-description: var(--onyx-font-family-OCR-A-Std);
   --onyx-font-family-h1: var(--onyx-font-family-Source-Sans-3-Variable);
   --onyx-font-family-h2: var(--onyx-font-family-Source-Sans-3-Variable);
   --onyx-font-family-h3: var(--onyx-font-family-Source-Sans-3-Variable);
@@ -428,9 +427,24 @@
   --onyx-font-size-xl: var(--onyx-font-values-500);
   --onyx-font-weight-regular: var(--onyx-font-weight-400);
   --onyx-font-weight-semibold: var(--onyx-font-weight-600);
+  --onyx-radius-component-badge: var(--onyx-number-radius-600);
+  --onyx-radius-component-button: var(--onyx-number-radius-200);
+  --onyx-radius-component-checkbox: var(--onyx-number-radius-200);
+  --onyx-radius-component-container-sharp: var(--onyx-number-radius-200);
+  --onyx-radius-component-container-soft: var(--onyx-number-radius-300);
+  --onyx-radius-component-flyout: var(--onyx-number-radius-300);
+  --onyx-radius-component-icon-button: var(--onyx-number-radius-600);
+  --onyx-radius-component-input: var(--onyx-number-radius-200);
+  --onyx-radius-component-search-sharp: var(--onyx-number-radius-200);
+  --onyx-radius-component-search-soft: var(--onyx-number-radius-300);
+  --onyx-radius-component-segmented-control-inside: var(--onyx-number-radius-200);
+  --onyx-radius-component-segmented-control-outside: var(--onyx-number-radius-300);
+  --onyx-radius-component-skeleton: var(--onyx-number-radius-200);
+  --onyx-radius-component-system-button: var(--onyx-number-radius-200);
   --onyx-radius-full: var(--onyx-number-radius-600);
   --onyx-radius-lg: var(--onyx-number-radius-400);
   --onyx-radius-md: var(--onyx-number-radius-300);
+  --onyx-radius-none: var(--onyx-number-radius-none);
   --onyx-radius-sm: var(--onyx-number-radius-200);
   --onyx-radius-xl: var(--onyx-number-radius-500);
   --onyx-radius-xs: var(--onyx-number-radius-100);

packages/sit-onyx/src/styles/variables/themes/value.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "value" theme.
- * Imported from Figma API on Fri, 19 Dec 2025 11:04:23 GMT
+ * Imported from Figma API on Fri, 27 Mar 2026 07:44:54 GMT
  */
 :where(:root),
 .onyx-theme-default {
@@ -318,7 +318,6 @@
   --onyx-font-family-IBM-Plex-Sans-Variable: "IBM Plex Sans Variable";
   --onyx-font-family-Kaufland: "Kaufland";
   --onyx-font-family-Lidl-Font-Pro: "Lidl Font Pro";
-  --onyx-font-family-OCR-A-Std: "OCR A Std";
   --onyx-font-family-Source-Code-Pro-Variable: "Source Code Pro Variable";
   --onyx-font-family-Source-Sans-3-Variable: "Source Sans 3 Variable";
   --onyx-font-family-Univia-Pro: "Univia Pro";
@@ -338,10 +337,17 @@
   --onyx-font-weight-800: 800;
   --onyx-number-radius-100: 0.125rem;
   --onyx-number-radius-200: 0.25rem;
+  --onyx-number-radius-250: 0.375rem;
   --onyx-number-radius-300: 0.5rem;
+  --onyx-number-radius-325: 0.625rem;
+  --onyx-number-radius-350: 0.75rem;
+  --onyx-number-radius-375: 0.875rem;
   --onyx-number-radius-400: 1rem;
+  --onyx-number-radius-450: 1.25rem;
+  --onyx-number-radius-475: 1.5rem;
   --onyx-number-radius-500: 2rem;
   --onyx-number-radius-600: 62.5rem;
+  --onyx-number-radius-none: 0rem;
   --onyx-number-spacing-0: 0rem;
   --onyx-number-spacing-100: 0.125rem;
   --onyx-number-spacing-200: 0.25rem;