@nurihaus/web-design-system 3.1.1 → 3.2.0

package/dist/styles.css

@@ -207,6 +207,18 @@
   --modal-width-m: 450px;
   --modal-width-l: 500px;
 
+  /* 하단 탭 바: 화면 아래에 떠 있는 유리 캡슐. 화면은 아래를 --bottom-nav-space(+ 안전 영역)만큼 비운다 */
+  --bottom-nav-height: 62px;
+  --bottom-nav-padding: 5px;
+  --bottom-nav-offset: 14px;
+  --bottom-nav-space: calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 16px);
+  --bottom-nav-badge-dot: 8px;
+  --bottom-nav-badge-count: 18px;
+  --glass-blur: 18px;
+
+  /* 진행 단계 바 */
+  --step-bar-height: 4px;
+
   /* 그 밖의 치수 */
   --icon-size-s: 18px;
   --icon-size-m: 20px;
@@ -228,6 +240,7 @@
 
   /* 그림자 */
   --shadow-popover: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-floating: 0px 10px 30px rgba(24, 24, 27, 0.14), 0px 1px 3px rgba(24, 24, 27, 0.08);
 
   /* 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 */
   --z-base: 0;
@@ -244,6 +257,9 @@
   --motion-fast: 160ms;
   --motion-base: 300ms;
   --motion-ease: ease;
+  --motion-slow: 420ms;
+  /* 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 */
+  --motion-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
   --spinner-duration: 1.2s;
   --skeleton-duration: 1.5s;
   --spinner-ease: cubic-bezier(0.5, 0, 0.5, 1);
@@ -268,12 +284,30 @@
   --button-variant-outlined-background: var(--color-white);
   --button-variant-outlined-border: var(--color-accent-red-700);
   --button-variant-outlined-text: var(--color-accent-red-700);
-  --button-size-xl: [object Object];
-  --button-size-lg: [object Object];
-  --button-size-md: [object Object];
-  --button-size-rg: [object Object];
-  --button-size-sm: [object Object];
-  --button-size-xs: [object Object];
+  --button-size-xl-font-family: var(--font-family-primary);
+  --button-size-xl-font-weight: var(--font-weight-bold);
+  --button-size-xl-font-size: var(--font-size-lg);
+  --button-size-xl-line-height: var(--line-height-lg);
+  --button-size-lg-font-family: var(--font-family-primary);
+  --button-size-lg-font-weight: var(--font-weight-bold);
+  --button-size-lg-font-size: var(--font-size-base);
+  --button-size-lg-line-height: var(--line-height-base);
+  --button-size-md-font-family: var(--font-family-primary);
+  --button-size-md-font-weight: var(--font-weight-semibold);
+  --button-size-md-font-size: var(--font-size-sm);
+  --button-size-md-line-height: var(--line-height-sm);
+  --button-size-rg-font-family: var(--font-family-primary);
+  --button-size-rg-font-weight: var(--font-weight-semibold);
+  --button-size-rg-font-size: var(--font-size-sm);
+  --button-size-rg-line-height: var(--line-height-sm);
+  --button-size-sm-font-family: var(--font-family-primary);
+  --button-size-sm-font-weight: var(--font-weight-semibold);
+  --button-size-sm-font-size: var(--font-size-xsm);
+  --button-size-sm-line-height: var(--line-height-sm);
+  --button-size-xs-font-family: var(--font-family-primary);
+  --button-size-xs-font-weight: var(--font-weight-semibold);
+  --button-size-xs-font-size: var(--font-size-xsm);
+  --button-size-xs-line-height: var(--line-height-sm);
 }
 /* semantic: admin */
 :root[data-ds-theme='admin'] {
@@ -312,12 +346,30 @@
   --button-variant-confirm-hover-background: var(--color-accent-red-700);
   --button-variant-confirm-hover-border: var(--color-accent-red-700);
   --button-variant-confirm-hover-text: var(--color-white);
-  --button-xl: [object Object];
-  --button-l: [object Object];
-  --button-sb: [object Object];
-  --button-r: [object Object];
-  --button-s: [object Object];
-  --button-xs: [object Object];
+  --button-xl-font-family: var(--font-family-primary);
+  --button-xl-font-weight: var(--font-weight-bold);
+  --button-xl-font-size: var(--font-size-lg);
+  --button-xl-line-height: var(--line-height-lg);
+  --button-l-font-family: var(--font-family-primary);
+  --button-l-font-weight: var(--font-weight-bold);
+  --button-l-font-size: var(--font-size-base);
+  --button-l-line-height: var(--line-height-base);
+  --button-sb-font-family: var(--font-family-primary);
+  --button-sb-font-weight: var(--font-weight-semibold);
+  --button-sb-font-size: var(--font-size-sm);
+  --button-sb-line-height: var(--line-height-sm);
+  --button-r-font-family: var(--font-family-primary);
+  --button-r-font-weight: var(--font-weight-semibold);
+  --button-r-font-size: var(--font-size-sm);
+  --button-r-line-height: var(--line-height-sm);
+  --button-s-font-family: var(--font-family-primary);
+  --button-s-font-weight: var(--font-weight-semibold);
+  --button-s-font-size: var(--font-size-xsm);
+  --button-s-line-height: var(--line-height-sm);
+  --button-xs-font-family: var(--font-family-primary);
+  --button-xs-font-weight: var(--font-weight-semibold);
+  --button-xs-font-size: var(--font-size-xsm);
+  --button-xs-line-height: var(--line-height-sm);
   --button-size-xs: 30;
   --button-size-s: 40;
   --button-size-r: 48;
@@ -735,6 +787,133 @@ p {
     background-color: var(--color-white);
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
+.base-bottom-nav:where(.root) {
+    position: fixed;
+    left: var(--spacing-16);
+    right: var(--spacing-16);
+    /* 기기 홈 막대만큼 더 띄운다. env() 의 대체값 0 은 단위가 있어야 calc 가 성립한다 */
+    bottom: calc(var(--bottom-nav-offset) + env(safe-area-inset-bottom, 0px)); /* raw-px */
+    z-index: var(--z-sticky);
+    display: grid;
+    grid-template-columns: repeat(var(--bottom-nav-count), minmax(0, 1fr));
+    height: var(--bottom-nav-height);
+    padding: var(--bottom-nav-padding);
+    box-sizing: border-box;
+    border-radius: var(--radius-full);
+    isolation: isolate;
+  }
+.base-bottom-nav:where(.indicator) {
+    position: absolute;
+    z-index: var(--z-base);
+    top: var(--bottom-nav-padding);
+    bottom: var(--bottom-nav-padding);
+    left: var(--bottom-nav-padding);
+    width: calc((100% - 2 * var(--bottom-nav-padding)) / var(--bottom-nav-count));
+    border-radius: inherit;
+    transform: translateX(calc(var(--bottom-nav-active) * 100%));
+  }
+.base-bottom-nav:where(.item) {
+    position: relative;
+    z-index: var(--z-raised);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-2);
+    border-radius: inherit;
+    text-decoration: none;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * bottom-nav — 유리 캡슐                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.bottom-nav {
+  /* 뒤를 흐리고 채도를 올린 반투명 바탕 + 위쪽 반사광 + 흰 안쪽 테두리 + 그림자 */
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--color-grey-scale-50) 55%, transparent),
+      transparent 55%
+    ),
+    color-mix(in srgb, var(--color-grey-scale-50) 62%, transparent);
+  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
+  box-shadow:
+    inset 0 var(--hairline) 0 color-mix(in srgb, var(--color-grey-scale-50) 75%, transparent),
+    inset 0 0 0 var(--hairline) color-mix(in srgb, var(--color-grey-scale-50) 35%, transparent),
+    var(--shadow-floating);
+
+  /* 흐림을 못 하는 브라우저, 투명도 줄이기 설정에서는 거의 불투명하게 */
+}
+@supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
+.bottom-nav {
+    background: color-mix(in srgb, var(--color-grey-scale-50) 96%, transparent);
+}
+  }
+@media (prefers-reduced-transparency: reduce) {
+.bottom-nav {
+    background: color-mix(in srgb, var(--color-grey-scale-50) 98%, transparent);
+}
+  }
+.bottom-nav-indicator {
+  background: color-mix(in srgb, var(--color-purple-900) 10%, transparent);
+  box-shadow: inset 0 var(--hairline) 0
+    color-mix(in srgb, var(--color-grey-scale-50) 50%, transparent);
+  transition: transform var(--motion-slow) var(--motion-spring);
+}
+@media (prefers-reduced-motion: reduce) {
+.bottom-nav-indicator {
+    transition: none;
+}
+  }
+.bottom-nav-item {
+  color: var(--color-grey-scale-600);
+  font-size: var(--font-size-xsm);
+  font-weight: var(--font-weight-medium);
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--motion-fast) var(--motion-ease);
+}
+.bottom-nav-item[aria-current='page'] {
+    color: var(--color-purple-900);
+    font-weight: var(--font-weight-bold);
+  }
+.bottom-nav-item:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: calc(-1 * var(--spacing-2));
+  }
+.bottom-nav-item:active .bottom-nav-icon {
+    transform: scale(0.88);
+  }
+.bottom-nav-icon {
+  position: relative;
+  display: flex;
+  transition: transform var(--motion-fast) var(--motion-spring);
+}
+.bottom-nav-badge {
+  position: absolute;
+  top: 0;
+  left: calc(100% - var(--spacing-6));
+  min-width: var(--bottom-nav-badge-dot);
+  height: var(--bottom-nav-badge-dot);
+  box-sizing: border-box;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-red-500);
+  box-shadow: 0 0 0 var(--spacing-2) var(--color-grey-scale-50);
+}
+.bottom-nav-badge[data-count] {
+    top: calc(-1 * var(--spacing-4));
+    left: calc(100% - var(--spacing-8));
+    min-width: var(--bottom-nav-badge-count);
+    height: var(--bottom-nav-badge-count);
+    padding: 0 var(--spacing-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-grey-scale-50);
+    font-size: var(--font-size-xsm);
+    font-weight: var(--font-weight-bold);
+    font-variant-numeric: tabular-nums;
+  }
 .base-breadcrumb:where(.list) {
     display: flex;
     flex-wrap: wrap;
@@ -1005,6 +1184,73 @@ p {
     border-radius: var(--radius-4);
     background-color: var(--color-grey-scale-300);
   }
+.base-chip-group:where(.root) {
+    display: flex;
+    gap: var(--spacing-8);
+    overflow-x: auto;
+    /* 칩의 터치 여백이 잘리지 않게 위아래를 비운다 */
+    padding-block: var(--spacing-4);
+    scrollbar-width: none;
+  }
+.base-chip-group:where(.root)::-webkit-scrollbar {
+      display: none;
+    }
+.base-chip-group:where(.chip) {
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-6);
+    cursor: pointer;
+
+    /* 36 높이를 터치 44 로 넓힌다 */
+  }
+.base-chip-group:where(.chip)::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--spacing-4)) 0;
+    }
+.base-chip-group[data-disabled]:where(.chip) {
+      cursor: not-allowed;
+    }
+/***************************************************************************************************
+ *                                                                                                 *
+ * chip-group                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.chip-group-chip {
+  height: var(--control-height-s);
+  padding: 0 var(--spacing-14);
+  border: var(--hairline) solid var(--color-grey-scale-300);
+  border-radius: var(--radius-full);
+  background: var(--color-grey-scale-50);
+  color: var(--color-grey-scale-600);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  transition:
+    background-color var(--motion-fast) var(--motion-ease),
+    color var(--motion-fast) var(--motion-ease),
+    border-color var(--motion-fast) var(--motion-ease);
+}
+.chip-group-chip[data-state='on'] {
+    border-color: var(--color-purple-900);
+    background: var(--color-purple-900);
+    color: var(--color-grey-scale-50);
+    font-weight: var(--font-weight-semibold);
+  }
+.chip-group-chip[data-disabled] {
+    border-color: var(--color-grey-scale-200);
+    color: var(--color-grey-scale-300);
+  }
+.chip-group-chip:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: var(--spacing-2);
+  }
+.chip-group-count {
+  font-size: var(--font-size-xsm);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.75;
+}
 .base-collapsible-menu.trigger {
     display: flex;
     align-items: center;
@@ -1773,6 +2019,22 @@ p {
 .base-text.color-accent-orange-900[class*='color-'] {
       color: var(--color-accent-orange-900);
     }
+.base-icon {
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.icon.size-s {
+    width: var(--icon-size-s);
+    height: var(--icon-size-s);
+  }
+.icon.size-m {
+    width: var(--icon-size-m);
+    height: var(--icon-size-m);
+  }
+.icon.size-l {
+    width: var(--icon-size-l);
+    height: var(--icon-size-l);
+  }
 .base-inline-loading {
   display: flex;
   width: 100%;
@@ -2213,6 +2475,64 @@ p {
     transform: translateX(100%);
   }
 }
+.base-step-progress:where(.root) {
+    display: grid;
+    grid-template-columns: repeat(var(--step-count), minmax(0, 1fr));
+    gap: var(--spacing-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+.base-step-progress:where(.step) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-6);
+    min-width: 0;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * step-progress                                                                                   *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.step-progress-bar {
+  display: block;
+  height: var(--step-bar-height);
+  border-radius: var(--radius-full);
+  background: var(--color-grey-scale-200);
+  transition: background-color var(--motion-base) var(--motion-ease);
+}
+.step-progress-name {
+  overflow: hidden;
+  color: var(--color-grey-scale-500);
+  font-size: var(--font-size-xsm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.step-progress-step[data-state='done'] .step-progress-bar {
+      background: var(--color-purple-900);
+    }
+.step-progress-step[data-state='done'] .step-progress-name {
+      color: var(--color-grey-scale-600);
+    }
+.step-progress-step[data-state='current'] .step-progress-bar {
+      background: var(--color-purple-600);
+    }
+.step-progress-step[data-state='current'] .step-progress-name {
+      color: var(--color-purple-900);
+      font-weight: var(--font-weight-semibold);
+    }
+/* 지금 단계 이름만 보인다. 다른 이름은 낭독기에는 남긴다 */
+.step-progress.label-visibility-current .step-progress-step:not([data-state='current']) .step-progress-name {
+    position: absolute;
+    width: 1px; /* raw-px */
+    height: 1px; /* raw-px */
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+.step-progress.label-visibility-current .step-progress-step[data-state='current'] .step-progress-name {
+    overflow: visible;
+  }
 .base-switch:where(.thumb) {
     display: block;
   }

package/dist/tokens/generated/semantic-admin.d.ts

@@ -62,40 +62,40 @@ export declare const semanticAdmin: {
             };
         };
         readonly xl: {
-            readonly fontFamily: "{primary}";
-            readonly fontWeight: "{font-weight.b}";
-            readonly fontSize: "{font-size.lg}";
-            readonly lineHeight: "{line-height.24}";
+            readonly fontFamily: "Pretendard";
+            readonly fontWeight: 700;
+            readonly fontSize: 18;
+            readonly lineHeight: 24;
         };
         readonly l: {
-            readonly fontFamily: "{primary}";
-            readonly fontWeight: "{font-weight.b}";
-            readonly fontSize: "{font-size.base}";
-            readonly lineHeight: "{line-height.22}";
+            readonly fontFamily: "Pretendard";
+            readonly fontWeight: 700;
+            readonly fontSize: 16;
+            readonly lineHeight: 22;
         };
         readonly sb: {
-            readonly fontFamily: "{primary}";
-            readonly fontWeight: "{font-weight.sb}";
-            readonly fontSize: "{font-size.sm}";
-            readonly lineHeight: "{line-height.18}";
+            readonly fontFamily: "Pretendard";
+            readonly fontWeight: 600;
+            readonly fontSize: 14;
+            readonly lineHeight: 18;
         };
         readonly r: {
-            readonly fontFamily: "{primary}";
-            readonly fontWeight: "{font-weight.sb}";
-            readonly fontSize: "{font-size.sm}";
-            readonly lineHeight: "{line-height.18}";
+            readonly fontFamily: "Pretendard";
+            readonly fontWeight: 600;
+            readonly fontSize: 14;
+            readonly lineHeight: 18;
         };
         readonly s: {
-            readonly fontFamily: "{primary}";
-            readonly fontWeight: "{font-weight.sb}";
-            readonly fontSize: "{font-size.xsm}";
-            readonly lineHeight: "{line-height.18}";
+            readonly fontFamily: "Pretendard";
+            readonly fontWeight: 600;
+            readonly fontSize: 12;
+            readonly lineHeight: 18;
         };
         readonly xs: {
-            readonly fontFamily: "{primary}";
-            readonly fontWeight: "{font-weight.sb}";
-            readonly fontSize: "{font-size.xsm}";
-            readonly lineHeight: "{line-height.18}";
+            readonly fontFamily: "Pretendard";
+            readonly fontWeight: 600;
+            readonly fontSize: 12;
+            readonly lineHeight: 18;
         };
         readonly size: {
             readonly xs: 30;

package/dist/tokens/generated/semantic-app.d.ts

@@ -34,40 +34,40 @@ export declare const semanticApp: {
         };
         readonly size: {
             readonly xl: {
-                readonly fontFamily: "{primary}";
-                readonly fontWeight: "{font-weight.b}";
-                readonly fontSize: "{font-size.lg}";
-                readonly lineHeight: "{line-height.24}";
+                readonly fontFamily: "Pretendard";
+                readonly fontWeight: 700;
+                readonly fontSize: 18;
+                readonly lineHeight: 24;
             };
             readonly lg: {
-                readonly fontFamily: "{primary}";
-                readonly fontWeight: "{font-weight.b}";
-                readonly fontSize: "{font-size.base}";
-                readonly lineHeight: "{line-height.22}";
+                readonly fontFamily: "Pretendard";
+                readonly fontWeight: 700;
+                readonly fontSize: 16;
+                readonly lineHeight: 22;
             };
             readonly md: {
-                readonly fontFamily: "{primary}";
-                readonly fontWeight: "{font-weight.sb}";
-                readonly fontSize: "{font-size.sm}";
-                readonly lineHeight: "{line-height.18}";
+                readonly fontFamily: "Pretendard";
+                readonly fontWeight: 600;
+                readonly fontSize: 14;
+                readonly lineHeight: 18;
             };
             readonly rg: {
-                readonly fontFamily: "{primary}";
-                readonly fontWeight: "{font-weight.sb}";
-                readonly fontSize: "{font-size.sm}";
-                readonly lineHeight: "{line-height.18}";
+                readonly fontFamily: "Pretendard";
+                readonly fontWeight: 600;
+                readonly fontSize: 14;
+                readonly lineHeight: 18;
             };
             readonly sm: {
-                readonly fontFamily: "{primary}";
-                readonly fontWeight: "{font-weight.sb}";
-                readonly fontSize: "{font-size.xsm}";
-                readonly lineHeight: "{line-height.18}";
+                readonly fontFamily: "Pretendard";
+                readonly fontWeight: 600;
+                readonly fontSize: 12;
+                readonly lineHeight: 18;
             };
             readonly xs: {
-                readonly fontFamily: "{primary}";
-                readonly fontWeight: "{font-weight.sb}";
-                readonly fontSize: "{font-size.xsm}";
-                readonly lineHeight: "{line-height.18}";
+                readonly fontFamily: "Pretendard";
+                readonly fontWeight: 600;
+                readonly fontSize: 12;
+                readonly lineHeight: 18;
             };
         };
     };

package/dist/tokens.css

@@ -205,6 +205,18 @@
   --modal-width-m: 450px;
   --modal-width-l: 500px;
 
+  /* 하단 탭 바: 화면 아래에 떠 있는 유리 캡슐. 화면은 아래를 --bottom-nav-space(+ 안전 영역)만큼 비운다 */
+  --bottom-nav-height: 62px;
+  --bottom-nav-padding: 5px;
+  --bottom-nav-offset: 14px;
+  --bottom-nav-space: calc(var(--bottom-nav-height) + var(--bottom-nav-offset) + 16px);
+  --bottom-nav-badge-dot: 8px;
+  --bottom-nav-badge-count: 18px;
+  --glass-blur: 18px;
+
+  /* 진행 단계 바 */
+  --step-bar-height: 4px;
+
   /* 그 밖의 치수 */
   --icon-size-s: 18px;
   --icon-size-m: 20px;
@@ -226,6 +238,7 @@
 
   /* 그림자 */
   --shadow-popover: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-floating: 0px 10px 30px rgba(24, 24, 27, 0.14), 0px 1px 3px rgba(24, 24, 27, 0.08);
 
   /* 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 */
   --z-base: 0;
@@ -242,6 +255,9 @@
   --motion-fast: 160ms;
   --motion-base: 300ms;
   --motion-ease: ease;
+  --motion-slow: 420ms;
+  /* 끝에서 살짝 넘쳤다 돌아온다. 탭 바 선택 캡슐 */
+  --motion-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
   --spinner-duration: 1.2s;
   --skeleton-duration: 1.5s;
   --spinner-ease: cubic-bezier(0.5, 0, 0.5, 1);
@@ -266,12 +282,30 @@
   --button-variant-outlined-background: var(--color-white);
   --button-variant-outlined-border: var(--color-accent-red-700);
   --button-variant-outlined-text: var(--color-accent-red-700);
-  --button-size-xl: [object Object];
-  --button-size-lg: [object Object];
-  --button-size-md: [object Object];
-  --button-size-rg: [object Object];
-  --button-size-sm: [object Object];
-  --button-size-xs: [object Object];
+  --button-size-xl-font-family: var(--font-family-primary);
+  --button-size-xl-font-weight: var(--font-weight-bold);
+  --button-size-xl-font-size: var(--font-size-lg);
+  --button-size-xl-line-height: var(--line-height-lg);
+  --button-size-lg-font-family: var(--font-family-primary);
+  --button-size-lg-font-weight: var(--font-weight-bold);
+  --button-size-lg-font-size: var(--font-size-base);
+  --button-size-lg-line-height: var(--line-height-base);
+  --button-size-md-font-family: var(--font-family-primary);
+  --button-size-md-font-weight: var(--font-weight-semibold);
+  --button-size-md-font-size: var(--font-size-sm);
+  --button-size-md-line-height: var(--line-height-sm);
+  --button-size-rg-font-family: var(--font-family-primary);
+  --button-size-rg-font-weight: var(--font-weight-semibold);
+  --button-size-rg-font-size: var(--font-size-sm);
+  --button-size-rg-line-height: var(--line-height-sm);
+  --button-size-sm-font-family: var(--font-family-primary);
+  --button-size-sm-font-weight: var(--font-weight-semibold);
+  --button-size-sm-font-size: var(--font-size-xsm);
+  --button-size-sm-line-height: var(--line-height-sm);
+  --button-size-xs-font-family: var(--font-family-primary);
+  --button-size-xs-font-weight: var(--font-weight-semibold);
+  --button-size-xs-font-size: var(--font-size-xsm);
+  --button-size-xs-line-height: var(--line-height-sm);
 }
 /* semantic: admin */
 :root[data-ds-theme='admin'] {
@@ -310,12 +344,30 @@
   --button-variant-confirm-hover-background: var(--color-accent-red-700);
   --button-variant-confirm-hover-border: var(--color-accent-red-700);
   --button-variant-confirm-hover-text: var(--color-white);
-  --button-xl: [object Object];
-  --button-l: [object Object];
-  --button-sb: [object Object];
-  --button-r: [object Object];
-  --button-s: [object Object];
-  --button-xs: [object Object];
+  --button-xl-font-family: var(--font-family-primary);
+  --button-xl-font-weight: var(--font-weight-bold);
+  --button-xl-font-size: var(--font-size-lg);
+  --button-xl-line-height: var(--line-height-lg);
+  --button-l-font-family: var(--font-family-primary);
+  --button-l-font-weight: var(--font-weight-bold);
+  --button-l-font-size: var(--font-size-base);
+  --button-l-line-height: var(--line-height-base);
+  --button-sb-font-family: var(--font-family-primary);
+  --button-sb-font-weight: var(--font-weight-semibold);
+  --button-sb-font-size: var(--font-size-sm);
+  --button-sb-line-height: var(--line-height-sm);
+  --button-r-font-family: var(--font-family-primary);
+  --button-r-font-weight: var(--font-weight-semibold);
+  --button-r-font-size: var(--font-size-sm);
+  --button-r-line-height: var(--line-height-sm);
+  --button-s-font-family: var(--font-family-primary);
+  --button-s-font-weight: var(--font-weight-semibold);
+  --button-s-font-size: var(--font-size-xsm);
+  --button-s-line-height: var(--line-height-sm);
+  --button-xs-font-family: var(--font-family-primary);
+  --button-xs-font-weight: var(--font-weight-semibold);
+  --button-xs-font-size: var(--font-size-xsm);
+  --button-xs-line-height: var(--line-height-sm);
   --button-size-xs: 30;
   --button-size-s: 40;
   --button-size-r: 48;