@nexus-cross/design-system 1.1.1 → 2.0.0

package/dist/tokens/css.css

@@ -0,0 +1,405 @@
+/**
+ * Company CSS — 순수 CSS 변수 (:root + .dark)
+ * Tailwind 없이 var(--*) 로 사용 가능
+ * 자동 생성: scripts/generate-css.js
+ * 생성일: 2026-05-06T03:32:31.085Z
+ */
+
+:root {
+  --color-bg-default: #FFFFFF;
+  --color-bg-subtle: #F3F6F8;
+  --color-bg-strong: #EAEDEE;
+  --color-surface-default: #FFFFFF;
+  --color-surface-default-dim: #F3F6F8;
+  --color-surface-default-hover: #F3F6F8;
+  --color-surface-default-pressed: #EAEDEE;
+  --color-surface-default-disabled: #EAEDEE;
+  --color-surface-subtle: #F3F6F8;
+  --color-surface-subtle-hover: #EAEDEE;
+  --color-surface-strong: #EAEDEE;
+  --color-surface-inverted: #161A21;
+  --color-text-highlight: #000000;
+  --color-text-primary: #1E232E;
+  --color-text-primary-hover: #000000;
+  --color-text-primary-pressed: #000000;
+  --color-text-secondary: #7E8597;
+  --color-text-secondary-hover: #3B4153;
+  --color-text-secondary-pressed: #3B4153;
+  --color-text-tertiary: #7E8597;
+  --color-text-tertiary-hover: #62697A;
+  --color-text-tertiary-pressed: #62697A;
+  --color-text-muted: #A2AABA;
+  --color-text-inverted: #FFFFFF;
+  --color-icon-highlight: #000000;
+  --color-icon-primary: #1E232E;
+  --color-icon-primary-hover: #000000;
+  --color-icon-primary-pressed: #000000;
+  --color-icon-secondary: #7E8597;
+  --color-icon-secondary-hover: #3B4153;
+  --color-icon-secondary-pressed: #3B4153;
+  --color-icon-tertiary: #7E8597;
+  --color-icon-tertiary-hover: #62697A;
+  --color-icon-tertiary-pressed: #62697A;
+  --color-icon-muted: #A2AABA;
+  --color-icon-inverted: #FFFFFF;
+  --color-border-default: #EAEDEE;
+  --color-border-default-hover: #A2AABA;
+  --color-border-default-focus: #62697A;
+  --color-border-subtle: #F3F6F8;
+  --color-border-medium: #C6D0DA;
+  --color-border-strong: #000000;
+  --color-accent-primary: #09B498;
+  --color-accent-primary-hover: #07C6A6;
+  --color-accent-primary-pressed: #0F947E;
+  --color-accent-primary-disabled: #CDF4ED;
+  --color-accent-primary-focus: #09B498;
+  --color-accent-primary-intense: #0F947E;
+  --color-accent-primary-dim: #83DCC9;
+  --color-accent-on-primary: #FFFFFF;
+  --color-accent-secondary: #7346F3;
+  --color-accent-secondary-intense: #7346F3;
+  --color-accent-secondary-dim: #E0CDF8;
+  --color-accent-secondary-hover: #7D4FFF;
+  --color-accent-secondary-pressed: #9975FF;
+  --color-accent-secondary-disabled: #F4EBFF;
+  --color-accent-secondary-focus: #7D4FFF;
+  --color-accent-on-secondary: #FFFFFF;
+  --color-accent-primary-bg: #EAFAF6;
+  --color-accent-secondary-bg: #F9F5FF;
+  --color-status-success: #00B784;
+  --color-status-success-hover: #00C890;
+  --color-status-success-pressed: #1B9674;
+  --color-status-success-disabled: #CDF4EA;
+  --color-status-success-intense: #1B9674;
+  --color-status-success-dim: #9FECD7;
+  --color-status-warning: #FF9D00;
+  --color-status-warning-hover: #FFAA00;
+  --color-status-warning-pressed: #F9C127;
+  --color-status-warning-disabled: #FFF2D2;
+  --color-status-warning-intense: #D9840C;
+  --color-status-warning-dim: #FFDB6E;
+  --color-status-danger: #DB0A2D;
+  --color-status-danger-hover: #E62848;
+  --color-status-danger-pressed: #AF2239;
+  --color-status-danger-disabled: #FDE8EB;
+  --color-status-danger-intense: #D20625;
+  --color-status-danger-dim: #FFBBC4;
+  --color-status-danger-focus: #E62848;
+  --color-status-info: #0095FF;
+  --color-status-info-hover: #20B1FF;
+  --color-status-info-pressed: #1087FF;
+  --color-status-info-disabled: #CCEFFF;
+  --color-status-info-intense: #1672D0;
+  --color-status-info-dim: #92DDFF;
+  --color-overlay-dim: #000000;
+  --color-overlay-light: #000000;
+  --color-static-white: #FFFFFF;
+  --color-static-black: #000000;
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.12);
+  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.12);
+  --shadow-lg: 0 2px 8px -1px rgb(0 0 0 / 0.12);
+  --shadow-xl: 0 4px 15px -3px rgb(0 0 0 / 0.12);
+  --shadow-2xl: 0 5px 25px -5px rgb(0 0 0 / 0.12);
+  --radius-corner-none: 0px;
+  --radius-corner-sm: 4px;
+  --radius-corner-md: 8px;
+  --radius-corner-lg: 12px;
+  --radius-corner-xl: 16px;
+  --radius-corner-2xl: 24px;
+  --radius-corner-full: 9999px;
+  --breakpoint-screen-xs: 320px;
+  --breakpoint-screen-sm: 640px;
+  --breakpoint-screen-md: 768px;
+  --breakpoint-screen-lg: 1024px;
+  --breakpoint-screen-xl: 1280px;
+  --breakpoint-screen-2xl: 1440px;
+  --text-text-xs: 0.75rem;
+  --text-text-xs--line-height: 1.5;
+  --text-text-sm: 0.875rem;
+  --text-text-sm--line-height: 1.5;
+  --text-text-base: 1rem;
+  --text-text-base--line-height: 1.5;
+  --text-text-lg: 1.125rem;
+  --text-text-lg--line-height: 1.5;
+  --text-text-xl: 1.25rem;
+  --text-text-xl--line-height: 1.5;
+  --text-text-medium-xs: 0.75rem;
+  --text-text-medium-xs--line-height: 1.5;
+  --text-text-medium-sm: 0.875rem;
+  --text-text-medium-sm--line-height: 1.5;
+  --text-text-medium-base: 1rem;
+  --text-text-medium-base--line-height: 1.5;
+  --text-text-medium-lg: 1.125rem;
+  --text-text-medium-lg--line-height: 1.5;
+  --text-text-medium-xl: 1.25rem;
+  --text-text-medium-xl--line-height: 1.5;
+  --text-text-semibold-xs: 0.75rem;
+  --text-text-semibold-xs--line-height: 1.5;
+  --text-text-semibold-sm: 0.875rem;
+  --text-text-semibold-sm--line-height: 1.5;
+  --text-text-semibold-base: 1rem;
+  --text-text-semibold-base--line-height: 1.5;
+  --text-text-semibold-lg: 1.125rem;
+  --text-text-semibold-lg--line-height: 1.5;
+  --text-text-semibold-xl: 1.25rem;
+  --text-text-semibold-xl--line-height: 1.5;
+  --text-heading-h7: 0.875rem;
+  --text-heading-h7--line-height: 1.25;
+  --text-heading-h6: 1rem;
+  --text-heading-h6--line-height: 1.25;
+  --text-heading-h5: 1.125rem;
+  --text-heading-h5--line-height: 1.25;
+  --text-heading-h4: 1.25rem;
+  --text-heading-h4--line-height: 1.25;
+  --text-heading-h3: 1.5rem;
+  --text-heading-h3--line-height: 1.25;
+  --text-heading-h2: 1.875rem;
+  --text-heading-h2--line-height: 1.25;
+  --text-heading-h1: 2.25rem;
+  --text-heading-h1--line-height: 1.25;
+  --text-display-sm: 2.25rem;
+  --text-display-sm--line-height: 1.25;
+  --text-display-md: 3rem;
+  --text-display-md--line-height: 1.25;
+  --text-display-lg: 3.75rem;
+  --text-display-lg--line-height: 1.25;
+  --text-label-sm: 0.75rem;
+  --text-label-sm--line-height: 1;
+  --text-label-md: 0.875rem;
+  --text-label-md--line-height: 1;
+  --text-label-lg: 1rem;
+  --text-label-lg--line-height: 1;
+  --text-label-semibold-sm: 0.75rem;
+  --text-label-semibold-sm--line-height: 1;
+  --text-label-semibold-md: 0.875rem;
+  --text-label-semibold-md--line-height: 1;
+  --text-label-semibold-lg: 1rem;
+  --text-label-semibold-lg--line-height: 1;
+  --ease-transition-instant: linear;
+  --ease-transition-fast: cubic-bezier(0, 0, 0.2, 1);
+  --ease-transition-normal: cubic-bezier(0, 0, 0.2, 1);
+  --ease-transition-slow: cubic-bezier(0, 0, 0.2, 1);
+  --ease-animation-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ease-animation-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ease-animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --spacing-padding-none: 0;
+  --spacing-padding-2xs: 0.25rem;
+  --spacing-padding-xs: 0.5rem;
+  --spacing-padding-sm: 0.75rem;
+  --spacing-padding-md: 1rem;
+  --spacing-padding-lg: 1.5rem;
+  --spacing-padding-xl: 2rem;
+  --spacing-padding-2xl: 2.5rem;
+  --spacing-gap-none: 0;
+  --spacing-gap-xs: 0.25rem;
+  --spacing-gap-sm: 0.5rem;
+  --spacing-gap-md: 1rem;
+  --spacing-gap-lg: 1.5rem;
+  --spacing-gap-xl: 2rem;
+  --border-width-stroke-none: 0px;
+  --border-width-stroke-hairline: 0.5px;
+  --border-width-stroke-thin: 1px;
+  --border-width-stroke-default: 1px;
+  --border-width-stroke-thick: 1.5px;
+  --border-width-stroke-heavy: 2px;
+  --opacity-overlay-dim: 0.5;
+  --opacity-overlay-light: 0.3;
+  --opacity-overlay-heavy: 0.7;
+  --opacity-disabled-element: 0.4;
+  --opacity-disabled-text: 0.5;
+  --opacity-hover-subtle: 0.05;
+  --opacity-hover-default: 0.1;
+  --opacity-pressed-subtle: 0.1;
+  --opacity-pressed-default: 0.2;
+  --size-icon-xs: 12px;
+  --size-icon-sm: 16px;
+  --size-icon-md: 20px;
+  --size-icon-lg: 24px;
+  --size-icon-xl: 32px;
+  --size-control-xs: 24px;
+  --size-control-sm: 32px;
+  --size-control-md: 40px;
+  --size-control-lg: 48px;
+  --size-touch-min: 44px;
+  --size-avatar-xs: 24px;
+  --size-avatar-sm: 32px;
+  --size-avatar-md: 40px;
+  --size-avatar-lg: 48px;
+  --size-avatar-xl: 64px;
+  --size-avatar-2xl: 96px;
+  --z-index-layer-base: 0;
+  --z-index-layer-dropdown: 10;
+  --z-index-layer-sticky: 20;
+  --z-index-layer-popover: 30;
+  --z-index-layer-modal: 40;
+  --z-index-layer-toast: 50;
+  --z-index-layer-tooltip: 100;
+  --duration-transition-instant: 0ms;
+  --duration-transition-fast: 150ms;
+  --duration-transition-normal: 200ms;
+  --duration-transition-slow: 300ms;
+  --duration-animation-enter: 200ms;
+  --duration-animation-exit: 150ms;
+  --duration-animation-bounce: 500ms;
+  --font-weight-text-xs: 400;
+  --letter-spacing-text-xs: -0.01em;
+  --font-weight-text-sm: 400;
+  --letter-spacing-text-sm: -0.01em;
+  --font-weight-text-base: 400;
+  --letter-spacing-text-base: -0.01em;
+  --font-weight-text-lg: 400;
+  --letter-spacing-text-lg: -0.01em;
+  --font-weight-text-xl: 400;
+  --letter-spacing-text-xl: -0.01em;
+  --font-weight-text-medium-xs: 500;
+  --letter-spacing-text-medium-xs: -0.01em;
+  --font-weight-text-medium-sm: 500;
+  --letter-spacing-text-medium-sm: -0.01em;
+  --font-weight-text-medium-base: 500;
+  --letter-spacing-text-medium-base: -0.01em;
+  --font-weight-text-medium-lg: 500;
+  --letter-spacing-text-medium-lg: -0.01em;
+  --font-weight-text-medium-xl: 500;
+  --letter-spacing-text-medium-xl: -0.01em;
+  --font-weight-text-semibold-xs: 600;
+  --letter-spacing-text-semibold-xs: -0.01em;
+  --font-weight-text-semibold-sm: 600;
+  --letter-spacing-text-semibold-sm: -0.01em;
+  --font-weight-text-semibold-base: 600;
+  --letter-spacing-text-semibold-base: -0.01em;
+  --font-weight-text-semibold-lg: 600;
+  --letter-spacing-text-semibold-lg: -0.01em;
+  --font-weight-text-semibold-xl: 600;
+  --letter-spacing-text-semibold-xl: -0.01em;
+  --font-weight-heading-h7: 600;
+  --letter-spacing-heading-h7: 0;
+  --font-weight-heading-h6: 600;
+  --letter-spacing-heading-h6: 0;
+  --font-weight-heading-h5: 600;
+  --letter-spacing-heading-h5: 0;
+  --font-weight-heading-h4: 600;
+  --letter-spacing-heading-h4: 0;
+  --font-weight-heading-h3: 600;
+  --letter-spacing-heading-h3: 0;
+  --font-weight-heading-h2: 700;
+  --letter-spacing-heading-h2: 0;
+  --font-weight-heading-h1: 700;
+  --letter-spacing-heading-h1: 0;
+  --font-weight-display-sm: 700;
+  --letter-spacing-display-sm: 0;
+  --font-weight-display-md: 700;
+  --letter-spacing-display-md: 0;
+  --font-weight-display-lg: 700;
+  --letter-spacing-display-lg: 0;
+  --font-weight-label-sm: 500;
+  --letter-spacing-label-sm: 0;
+  --font-weight-label-md: 500;
+  --letter-spacing-label-md: 0;
+  --font-weight-label-lg: 500;
+  --letter-spacing-label-lg: 0;
+  --font-weight-label-semibold-sm: 600;
+  --letter-spacing-label-semibold-sm: 0;
+  --font-weight-label-semibold-md: 600;
+  --letter-spacing-label-semibold-md: 0;
+  --font-weight-label-semibold-lg: 600;
+  --letter-spacing-label-semibold-lg: 0;
+}
+
+.dark {
+  --color-bg-default: #1E232E;
+  --color-bg-subtle: #161A21;
+  --color-bg-strong: #000000;
+  --color-surface-default: #1E232E;
+  --color-surface-default-dim: #161A21;
+  --color-surface-default-hover: #252B39;
+  --color-surface-default-pressed: #363B4C;
+  --color-surface-default-disabled: #363B4C;
+  --color-surface-subtle: #252B39;
+  --color-surface-subtle-hover: #363B4C;
+  --color-surface-strong: #363B4C;
+  --color-surface-inverted: #F3F6F8;
+  --color-text-highlight: #FFFFFF;
+  --color-text-primary: #EAEDEE;
+  --color-text-primary-hover: #FFFFFF;
+  --color-text-primary-pressed: #FFFFFF;
+  --color-text-secondary: #A2AABA;
+  --color-text-secondary-hover: #C6D0DA;
+  --color-text-secondary-pressed: #C6D0DA;
+  --color-text-tertiary: #7E8597;
+  --color-text-tertiary-hover: #A2AABA;
+  --color-text-tertiary-pressed: #A2AABA;
+  --color-text-muted: #62697A;
+  --color-text-inverted: #000000;
+  --color-icon-highlight: #FFFFFF;
+  --color-icon-primary: #EAEDEE;
+  --color-icon-primary-hover: #FFFFFF;
+  --color-icon-primary-pressed: #FFFFFF;
+  --color-icon-secondary: #A2AABA;
+  --color-icon-secondary-hover: #C6D0DA;
+  --color-icon-secondary-pressed: #C6D0DA;
+  --color-icon-tertiary: #7E8597;
+  --color-icon-tertiary-hover: #A2AABA;
+  --color-icon-tertiary-pressed: #A2AABA;
+  --color-icon-muted: #62697A;
+  --color-icon-inverted: #000000;
+  --color-border-default: #3B4153;
+  --color-border-default-hover: #62697A;
+  --color-border-default-focus: #A2AABA;
+  --color-border-subtle: #252B39;
+  --color-border-medium: #62697A;
+  --color-border-strong: #FFFFFF;
+  --color-accent-primary: #00D5AA;
+  --color-accent-primary-hover: #12DFB6;
+  --color-accent-primary-pressed: #07C6A6;
+  --color-accent-primary-disabled: #123F3C;
+  --color-accent-primary-focus: #07C6A6;
+  --color-accent-primary-intense: #12DFB6;
+  --color-accent-primary-dim: #0F947E;
+  --color-accent-on-primary: #000000;
+  --color-accent-secondary: #7D4FFF;
+  --color-accent-secondary-intense: #9975FF;
+  --color-accent-secondary-dim: #7346F3;
+  --color-accent-secondary-hover: #9975FF;
+  --color-accent-secondary-pressed: #7346F3;
+  --color-accent-secondary-disabled: #3A1D7C;
+  --color-accent-secondary-focus: #9975FF;
+  --color-accent-on-secondary: #FFFFFF;
+  --color-accent-primary-bg: #113535;
+  --color-accent-secondary-bg: #2F1766;
+  --color-status-success: #02D69C;
+  --color-status-success-hover: #0BDFA5;
+  --color-status-success-pressed: #00C890;
+  --color-status-success-disabled: #0D4431;
+  --color-status-success-intense: #0BDFA5;
+  --color-status-success-dim: #1B9674;
+  --color-status-warning: #FFAA00;
+  --color-status-warning-hover: #FF9D00;
+  --color-status-warning-pressed: #F9C127;
+  --color-status-warning-disabled: #4A3F2B;
+  --color-status-warning-intense: #FFAA00;
+  --color-status-warning-dim: #9F701A;
+  --color-status-danger: #DB0A2D;
+  --color-status-danger-hover: #E62848;
+  --color-status-danger-pressed: #D20625;
+  --color-status-danger-disabled: #5B121E;
+  --color-status-danger-intense: #EC3C56;
+  --color-status-danger-dim: #AF2239;
+  --color-status-danger-focus: #AF2239;
+  --color-status-info: #0095FF;
+  --color-status-info-hover: #20B1FF;
+  --color-status-info-pressed: #1087FF;
+  --color-status-info-disabled: #143A67;
+  --color-status-info-intense: #20B1FF;
+  --color-status-info-dim: #1672D0;
+  --color-overlay-dim: #000000;
+  --color-overlay-light: #000000;
+  --color-static-white: #FFFFFF;
+  --color-static-black: #000000;
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-2xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+}

package/dist/tokens/data/borderWidth.json

@@ -0,0 +1,38 @@
+{
+  "primitive": {
+    "0": "0px",
+    "1": "1px",
+    "2": "2px",
+    "4": "4px",
+    "0.5": "0.5px",
+    "1.5": "1.5px"
+  },
+  "semantic": {
+    "stroke": {
+      "none": {
+        "source": "0",
+        "description": "No border"
+      },
+      "hairline": {
+        "source": "0.5",
+        "description": "Hairline border (0.5px)"
+      },
+      "thin": {
+        "source": "1",
+        "description": "Thin border"
+      },
+      "default": {
+        "source": "1",
+        "description": "Default border"
+      },
+      "thick": {
+        "source": "1.5",
+        "description": "Thick border"
+      },
+      "heavy": {
+        "source": "2",
+        "description": "Heavy border"
+      }
+    }
+  }
+}

package/dist/tokens/data/breakpoint.json

@@ -0,0 +1,23 @@
+{
+  "primitive": {
+    "320": "320px",
+    "375": "375px",
+    "480": "480px",
+    "640": "640px",
+    "768": "768px",
+    "1024": "1024px",
+    "1280": "1280px",
+    "1440": "1440px",
+    "1920": "1920px"
+  },
+  "semantic": {
+    "screen": {
+      "xs": { "source": "320", "description": "Extra small screens" },
+      "sm": { "source": "640", "description": "Small screens" },
+      "md": { "source": "768", "description": "Medium screens" },
+      "lg": { "source": "1024", "description": "Large screens" },
+      "xl": { "source": "1280", "description": "Extra large screens" },
+      "2xl": { "source": "1440", "description": "2X large screens" }
+    }
+  }
+}