@uniai-fe/uds-primitives 0.1.11 → 0.1.12

package/dist/styles.css

@@ -105,11 +105,11 @@
   --theme-button-color-blue-90: var(--color-blue-90);
   --theme-button-color-blue-50: var(--color-blue-50);
   --theme-button-color-blue-45: var(--color-blue-45);
-  --theme-button-overlay-solid-tertiary-bg: var(--color-bg-surface-strong);
+  --theme-button-overlay-solid-tertiary-bg: var(--color-surface-strong);
   /* Confirm dialog cancel 버튼을 위한 solid tertiary 색상 정의 */
-  --theme-button-tertiary-solid-bg: var(--color-bg-surface-neutral);
-  --theme-button-tertiary-solid-hover-bg: var(--color-bg-surface-strong);
-  --theme-button-tertiary-solid-pressed-bg: var(--color-bg-surface-strong);
+  --theme-button-tertiary-solid-bg: var(--color-surface-neutral);
+  --theme-button-tertiary-solid-hover-bg: var(--color-surface-strong);
+  --theme-button-tertiary-solid-pressed-bg: var(--color-surface-strong);
   --theme-button-tertiary-solid-foreground: var(--color-label-neutral);
   --theme-button-secondary-solid-bg: var(--color-blue-95, #e5eeff);
   --theme-button-secondary-solid-hover-bg: #dbe9ff;
@@ -117,11 +117,11 @@
   --theme-button-color-cool-gray-90: var(--color-cool-gray-90);
   --theme-button-color-cool-gray-95: var(--color-cool-gray-95);
   --theme-button-color-cool-gray-10: var(--color-cool-gray-10);
-  --theme-button-color-bg-surface-standard: var(--color-bg-surface-standard);
+  --theme-button-color-bg-surface-standard: var(--color-surface-standard);
   --theme-button-color-bg-alternative-cool-gray: var(
   --color-bg-alternative-cool-gray
   );
-  --theme-button-color-bg-surface-strong: var(--color-bg-surface-strong);
+  --theme-button-color-bg-surface-strong: var(--color-surface-strong);
   --theme-button-color-label-disabled: var(--color-label-disabled);
   /* overlays */
   --theme-button-overlay-solid-secondary-bg: var(--color-blue-90);
@@ -135,7 +135,7 @@
   --theme-checkbox-control-radius-medium: var(--theme-radius-xsmall-3, 3px);
   --theme-checkbox-control-radius-large: var(--theme-radius-small-1, 4px);
   --theme-checkbox-border-width: 1.4px;
-  --theme-checkbox-border-color: var(--color-border-standard-assistive);
+  --theme-checkbox-border-color: var(--color-border-assistive);
   --theme-checkbox-border-selected: var(--color-primary-default);
   --theme-checkbox-surface: var(--color-common-100);
   --theme-checkbox-surface-selected: var(--color-primary-default);
@@ -157,7 +157,7 @@
   --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
   --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
-  --drawer-surface-bg: var(--color-bg-surface-static-white);
+  --drawer-surface-bg: var(--color-surface-static-white);
   --drawer-radius-large: var(--theme-radius-large-2);
   --drawer-radius-medium: var(--theme-radius-large-1);
   --drawer-body-color: var(--color-label-standard);
@@ -202,9 +202,7 @@
   --theme-input-border-success: #99bdff;
   --theme-input-border-error: rgba(218, 29, 11, 0.44);
   --theme-input-border-disabled: var(--color-border-standard-cool-gray);
-  --theme-input-border-underline-disabled: var(
-  --color-border-standard-assistive
-  );
+  --theme-input-border-underline-disabled: var(--color-border-assistive);
   --theme-input-surface: var(--color-common-100);
   --theme-input-surface-muted: var(--color-neutral-99);
   --theme-input-surface-disabled: var(--color-neutral-95);
@@ -219,7 +217,7 @@
   --theme-navigation-label-font-weight: 500;
   --theme-navigation-label-letter-spacing: -0.12px;
   --theme-navigation-bg: var(--color-common-100, #ffffff);
-  --theme-navigation-border: var(--color-border-standard-assistive, #e4e5e7);
+  --theme-navigation-border: var(--color-border-assistive, #e4e5e7);
   --theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
   --theme-navigation-color: var(--color-label-strong, #3d3f43);
   --theme-navigation-color-active: var(--color-primary-default, #0061ff);
@@ -231,11 +229,11 @@
   --theme-radio-indicator-border-width: 1.4px;
   --theme-radio-indicator-border-width-selected-medium: 4px;
   --theme-radio-indicator-border-width-selected-large: 6px;
-  --theme-radio-border-color: var(--color-border-standard-assistive);
+  --theme-radio-border-color: var(--color-border-assistive);
   --theme-radio-border-selected: var(--color-primary-default);
   --theme-radio-surface-selected: var(--color-primary-default);
-  --theme-radio-surface-disabled: var(--color-border-standard-assistive);
-  --theme-radio-border-disabled: var(--color-border-standard-assistive);
+  --theme-radio-surface-disabled: var(--color-border-assistive);
+  --theme-radio-border-disabled: var(--color-border-assistive);
   --theme-radio-disabled-selected-fill: var(--color-primary-default);
   --theme-radio-label-color: var(--color-label-strong);
   --theme-radio-label-disabled: var(--color-label-disabled);
@@ -244,7 +242,7 @@
   --theme-radio-card-background: var(--color-common-100);
   --theme-radio-card-title-color: var(--color-label-strong);
   --theme-radio-card-description-color: var(--color-label-neutral);
-  --theme-radio-card-badge-background: var(--color-bg-surface-static-blue);
+  --theme-radio-card-badge-background: var(--color-surface-static-blue);
   --theme-radio-card-badge-color: var(--color-primary-default);
   --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;
@@ -356,7 +354,7 @@
 }
 
 .badge:where([data-style=outlined]) {
-  background-color: var(--color-bg-surface-static-white, #ffffff);
+  background-color: var(--color-surface-static-white, #ffffff);
   border-width: 1px;
   border-style: solid;
   border-color: var(--badge-outline-border-color);
@@ -413,7 +411,7 @@
 }
 
 .badge:where([data-style=fill][data-intent=gray]) {
-  --badge-fill-bg-color: var(--color-bg-surface-neutral, #f2f2f2);
+  --badge-fill-bg-color: var(--color-surface-neutral, #f2f2f2);
   --badge-fill-label-color: var(--color-label-neutral, #797e86);
 }
 
@@ -449,12 +447,12 @@
 }
 
 .badge:where([data-style=outlined][data-intent=tertiary]) {
-  --badge-outline-border-color: var(--color-border-standard-heavy, #313235);
+  --badge-outline-border-color: var(--color-border-heavy, #313235);
   --badge-outline-label-color: var(--color-label-strong, #18191b);
 }
 
 .badge:where([data-style=outlined][data-intent=gray]) {
-  --badge-outline-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --badge-outline-border-color: var(--color-border-assistive, #e4e5e7);
   --badge-outline-label-color: var(--color-label-standard, #3d3f43);
 }
 
@@ -538,7 +536,7 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button):not(.button-fill-solid):not(.button-fill-outlined):active:not(:disabled):not([aria-disabled=true]), :where(.button):not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
@@ -553,8 +551,8 @@
   color: var(--theme-button-color-common-100, var(--color-common-100));
 }
 :where(.button.button-fill-solid.button-priority-primary):disabled, :where(.button.button-fill-solid.button-priority-primary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-solid.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -572,8 +570,8 @@
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
 :where(.button.button-fill-outlined.button-priority-primary):disabled, :where(.button.button-fill-outlined.button-priority-primary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -591,8 +589,8 @@
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
 :where(.button.button-fill-solid.button-priority-secondary):disabled, :where(.button.button-fill-solid.button-priority-secondary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -610,8 +608,8 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button.button-fill-outlined.button-priority-secondary):disabled, :where(.button.button-fill-outlined.button-priority-secondary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -624,22 +622,22 @@
 }
 
 :where(.button.button-fill-solid.button-priority-tertiary) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
+  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   color: var(--theme-button-tertiary-solid-foreground, var(--color-label-neutral));
 }
 :where(.button.button-fill-solid.button-priority-tertiary):disabled, :where(.button.button-fill-solid.button-priority-tertiary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
-  border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
+  background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
+  border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-surface-static-cool-gray));
 }
 :where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
+  background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
+  border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-surface-strong));
 }
 
 :where(.button.button-fill-outlined.button-priority-tertiary) {
@@ -648,8 +646,8 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button.button-fill-outlined.button-priority-tertiary):disabled, :where(.button.button-fill-outlined.button-priority-tertiary)[aria-disabled=true] {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
 :where(.button.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
@@ -657,7 +655,7 @@
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 :where(.button.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
@@ -744,13 +742,13 @@
 }
 
 :where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--color-border-strong, var(--color-surface-strong));
+  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
 :where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
-  background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
-  border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  background-color: var(--color-border-strong, var(--color-surface-strong));
+  border-color: var(--theme-button-tertiary-solid-bg, var(--color-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
 }
 
@@ -789,8 +787,8 @@
 
 :where(.button:disabled),
 :where(.button[aria-disabled=true]) {
-  background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
-  border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
+  background-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
+  border-color: var(--theme-button-color-bg-surface-standard, var(--color-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
   cursor: not-allowed;
 }
@@ -851,7 +849,7 @@
   background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
 }
 :where(.button.button-template-text.button-priority-tertiary):active:not(:disabled), :where(.button.button-template-text.button-priority-tertiary)[data-user-action=pressed]:not(:disabled) {
-  background-color: var(--color-bg-surface-strong, var(--color-cool-gray-20));
+  background-color: var(--color-surface-strong, var(--color-cool-gray-20));
 }
 
 :where(.button.button-template-round) {
@@ -1066,14 +1064,14 @@ figure.chip {
 
 .chip:where([data-kind=filter]),
 .chip:where([data-kind=filter-rounded]) {
-  --chip-bg: var(--color-bg-surface-standard, #f2f2f3);
+  --chip-bg: var(--color-surface-standard, #f2f2f3);
   --chip-label-color: var(--color-label-neutral, #797e86);
   --chip-border-color: transparent;
 }
 
 .chip:where([data-kind=filter][data-selected=true]),
 .chip:where([data-kind=filter-rounded][data-selected=true]) {
-  --chip-bg: var(--color-bg-surface-heavy, #313235);
+  --chip-bg: var(--color-surface-heavy, #313235);
   --chip-label-color: var(--color-common-100, #ffffff);
 }
 
@@ -1082,7 +1080,7 @@ figure.chip {
 }
 
 .chip:where([data-kind=assist]) {
-  --chip-bg: var(--color-bg-surface-static-neutral, #f2f2f2);
+  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
   --chip-label-color: var(--color-label-strong, #18191b);
   --chip-gap: var(--spacing-gap-2, 8px);
   --chip-border-color: transparent;
@@ -1096,7 +1094,7 @@ figure.chip {
   --chip-gap: var(--spacing-gap-1, 4px);
   --chip-bg: var(--color-common-100, #ffffff);
   --chip-label-color: var(--color-label-standard, #3d3f43);
-  --chip-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --chip-border-color: var(--color-border-assistive, #e4e5e7);
   padding-inline-start: var(--spacing-padding-4, 8px);
   padding-inline-end: var(--spacing-padding-2, 4px);
 }
@@ -1851,7 +1849,7 @@ figure.chip {
   --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
   --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
   --pagination-dot-active-bg-secondary: var(
-    --color-bg-surface-heavy,
+    --color-surface-heavy,
     #313235
   );
   --pagination-carousel-height: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,