@deepnoid/ui 1.0.16 → 1.0.18

package/dist/style.css

@@ -1,4 +1,4 @@
-@import "@deepnoid/tailwind-config/preset.css";
+@import "./tailwind-config/preset.css";
 @import "./fonts/font.css";
 
 /* Tailwind CSS v4 Source Scanner */

package/dist/tailwind-config/preset.css

@@ -0,0 +1,7 @@
+/* Tailwind v4 CSS-First Modular Preset for Deepnoid UI */
+@import "./styles/tokens/theme.css";
+@import "./styles/tokens/colors.css";
+@import "./styles/generated/border.fallback.css";
+@import "./styles/generated/border.css";
+@import "./styles/animation.css";
+@import "./styles/utilities/scrollbar.css";

package/dist/tailwind-config/styles/animation.css

@@ -0,0 +1,62 @@
+/* Fallback for bundlers that do not run Tailwind's CSS transform on dependency CSS. */
+:root,
+:host {
+  --animate-slideInFromTop: slideInFromTop 0.5s ease-out;
+  --animate-slideInFromBottom: slideInFromBottom 0.5s ease-out;
+  --animate-slideInFromLeft: slideInFromLeft 0.5s ease-out;
+  --animate-slideInFromRight: slideInFromRight 0.5s ease-out;
+  --animate-slideOutToTop: slideOutToTop 0.5s ease-in;
+  --animate-slideOutToBottom: slideOutToBottom 0.5s ease-in;
+  --animate-slideOutToLeft: slideOutToLeft 0.5s ease-in;
+  --animate-slideOutToRight: slideOutToRight 0.5s ease-in;
+  --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running;
+}
+
+@theme {
+  --animate-slideInFromTop: slideInFromTop 0.5s ease-out;
+  --animate-slideInFromBottom: slideInFromBottom 0.5s ease-out;
+  --animate-slideInFromLeft: slideInFromLeft 0.5s ease-out;
+  --animate-slideInFromRight: slideInFromRight 0.5s ease-out;
+  --animate-slideOutToTop: slideOutToTop 0.5s ease-in;
+  --animate-slideOutToBottom: slideOutToBottom 0.5s ease-in;
+  --animate-slideOutToLeft: slideOutToLeft 0.5s ease-in;
+  --animate-slideOutToRight: slideOutToRight 0.5s ease-in;
+  --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running;
+}
+
+@keyframes slideInFromTop {
+  0% { transform: translateY(-10px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+@keyframes slideInFromBottom {
+  0% { transform: translateY(10px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+@keyframes slideInFromLeft {
+  0% { transform: translateX(-10px); opacity: 0; }
+  100% { transform: translateX(0); opacity: 1; }
+}
+@keyframes slideInFromRight {
+  0% { transform: translateX(10px); opacity: 0; }
+  100% { transform: translateX(0); opacity: 1; }
+}
+@keyframes slideOutToTop {
+  0% { transform: translateY(0); opacity: 1; }
+  100% { transform: translateY(-10px); opacity: 0; }
+}
+@keyframes slideOutToBottom {
+  0% { transform: translateY(0); opacity: 1; }
+  100% { transform: translateY(10px); opacity: 0; }
+}
+@keyframes slideOutToLeft {
+  0% { transform: translateX(0); opacity: 1; }
+  100% { transform: translateX(-10px); opacity: 0; }
+}
+@keyframes slideOutToRight {
+  0% { transform: translateX(0); opacity: 1; }
+  100% { transform: translateX(10px); opacity: 0; }
+}
+@keyframes indeterminate-bar {
+  0% { transform: translateX(-50%) scaleX(0.2); }
+  100% { transform: translateX(100%) scaleX(1); }
+}

package/dist/tailwind-config/styles/generated/border.css

@@ -0,0 +1,124 @@
+/* Auto-generated Border Utilities
+   Run `node scripts/generate-border.mjs` to update
+*/
+
+@utility border-t-sm {
+  border-top-width: 1px;
+}
+
+@utility border-b-sm {
+  border-bottom-width: 1px;
+}
+
+@utility border-l-sm {
+  border-left-width: 1px;
+}
+
+@utility border-r-sm {
+  border-right-width: 1px;
+}
+
+@utility border-x-sm {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+@utility border-y-sm {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+@utility border-sm {
+  border-width: 1px;
+}
+
+@utility border-t-md {
+  border-top-width: 1.25px;
+}
+
+@utility border-b-md {
+  border-bottom-width: 1.25px;
+}
+
+@utility border-l-md {
+  border-left-width: 1.25px;
+}
+
+@utility border-r-md {
+  border-right-width: 1.25px;
+}
+
+@utility border-x-md {
+  border-left-width: 1.25px;
+  border-right-width: 1.25px;
+}
+
+@utility border-y-md {
+  border-top-width: 1.25px;
+  border-bottom-width: 1.25px;
+}
+
+@utility border-md {
+  border-width: 1.25px;
+}
+
+@utility border-t-lg {
+  border-top-width: 1.5px;
+}
+
+@utility border-b-lg {
+  border-bottom-width: 1.5px;
+}
+
+@utility border-l-lg {
+  border-left-width: 1.5px;
+}
+
+@utility border-r-lg {
+  border-right-width: 1.5px;
+}
+
+@utility border-x-lg {
+  border-left-width: 1.5px;
+  border-right-width: 1.5px;
+}
+
+@utility border-y-lg {
+  border-top-width: 1.5px;
+  border-bottom-width: 1.5px;
+}
+
+@utility border-lg {
+  border-width: 1.5px;
+}
+
+@utility border-t-xl {
+  border-top-width: 1.75px;
+}
+
+@utility border-b-xl {
+  border-bottom-width: 1.75px;
+}
+
+@utility border-l-xl {
+  border-left-width: 1.75px;
+}
+
+@utility border-r-xl {
+  border-right-width: 1.75px;
+}
+
+@utility border-x-xl {
+  border-left-width: 1.75px;
+  border-right-width: 1.75px;
+}
+
+@utility border-y-xl {
+  border-top-width: 1.75px;
+  border-bottom-width: 1.75px;
+}
+
+@utility border-xl {
+  border-width: 1.75px;
+}
+

package/dist/tailwind-config/styles/generated/border.fallback.css

@@ -0,0 +1,124 @@
+/* Auto-generated Border Utilities
+   Run `node scripts/generate-border.mjs` to update
+*/
+
+.border-t-sm {
+  border-top-width: 1px;
+}
+
+.border-b-sm {
+  border-bottom-width: 1px;
+}
+
+.border-l-sm {
+  border-left-width: 1px;
+}
+
+.border-r-sm {
+  border-right-width: 1px;
+}
+
+.border-x-sm {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+.border-y-sm {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.border-sm {
+  border-width: 1px;
+}
+
+.border-t-md {
+  border-top-width: 1.25px;
+}
+
+.border-b-md {
+  border-bottom-width: 1.25px;
+}
+
+.border-l-md {
+  border-left-width: 1.25px;
+}
+
+.border-r-md {
+  border-right-width: 1.25px;
+}
+
+.border-x-md {
+  border-left-width: 1.25px;
+  border-right-width: 1.25px;
+}
+
+.border-y-md {
+  border-top-width: 1.25px;
+  border-bottom-width: 1.25px;
+}
+
+.border-md {
+  border-width: 1.25px;
+}
+
+.border-t-lg {
+  border-top-width: 1.5px;
+}
+
+.border-b-lg {
+  border-bottom-width: 1.5px;
+}
+
+.border-l-lg {
+  border-left-width: 1.5px;
+}
+
+.border-r-lg {
+  border-right-width: 1.5px;
+}
+
+.border-x-lg {
+  border-left-width: 1.5px;
+  border-right-width: 1.5px;
+}
+
+.border-y-lg {
+  border-top-width: 1.5px;
+  border-bottom-width: 1.5px;
+}
+
+.border-lg {
+  border-width: 1.5px;
+}
+
+.border-t-xl {
+  border-top-width: 1.75px;
+}
+
+.border-b-xl {
+  border-bottom-width: 1.75px;
+}
+
+.border-l-xl {
+  border-left-width: 1.75px;
+}
+
+.border-r-xl {
+  border-right-width: 1.75px;
+}
+
+.border-x-xl {
+  border-left-width: 1.75px;
+  border-right-width: 1.75px;
+}
+
+.border-y-xl {
+  border-top-width: 1.75px;
+  border-bottom-width: 1.75px;
+}
+
+.border-xl {
+  border-width: 1.75px;
+}
+

package/dist/tailwind-config/styles/tokens/colors.css

@@ -0,0 +1,371 @@
+/* Colors */
+@theme {
+  --color-bg-01: #040811;
+  --color-bg-02: #040811;
+  --color-bg-03: #14161e;
+  --color-bg-04: #070414;
+  --color-bg-05: #070c12;
+  --color-bg-06: #202123;
+  --color-gray-cool-50: #f7f7f8;
+  --color-gray-cool-100: #eeeef0;
+  --color-gray-cool-200: #d8d9df;
+  --color-gray-cool-300: #b6b8c3;
+  --color-gray-cool-400: #999ca9;
+  --color-gray-cool-500: #717486;
+  --color-gray-cool-600: #5b5e6e;
+  --color-gray-cool-700: #4a4c5a;
+  --color-gray-cool-800: #40424c;
+  --color-gray-cool-900: #36373f;
+  --color-gray-cool-950: #25252c;
+  --color-gray-warm-50: #f6f6f6;
+  --color-gray-warm-100: #e7e7e7;
+  --color-gray-warm-200: #d1d1d1;
+  --color-gray-warm-300: #b0b0b0;
+  --color-gray-warm-400: #888888;
+  --color-gray-warm-500: #6d6d6d;
+  --color-gray-warm-600: #5d5d5d;
+  --color-gray-warm-700: #525252;
+  --color-gray-warm-800: #454545;
+  --color-gray-warm-900: #3d3d3d;
+  --color-gray-warm-950: #25252c;
+  --color-opacity-white-0: #ffffff, 0;
+  --color-opacity-white-5: #ffffff, 5;
+  --color-opacity-white-10: #ffffff, 10;
+  --color-opacity-white-20: #ffffff, 20;
+  --color-opacity-white-30: #ffffff, 30;
+  --color-opacity-white-40: #ffffff, 40;
+  --color-opacity-white-50: #ffffff, 50;
+  --color-opacity-white-60: #ffffff, 60;
+  --color-opacity-white-70: #ffffff, 70;
+  --color-opacity-white-80: #ffffff, 80;
+  --color-opacity-white-90: #ffffff, 90;
+  --color-opacity-black-0: #000000, 0;
+  --color-opacity-black-5: #000000, 5;
+  --color-opacity-black-10: #000000, 10;
+  --color-opacity-black-20: #000000, 20;
+  --color-opacity-black-30: #000000, 30;
+  --color-opacity-black-40: #000000, 40;
+  --color-opacity-black-50: #000000, 50;
+  --color-opacity-black-60: #000000, 60;
+  --color-opacity-black-70: #000000, 70;
+  --color-opacity-black-80: #000000, 80;
+  --color-opacity-black-90: #000000, 90;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee9e9;
+  --color-red-200: #fccfd2;
+  --color-red-300: #f9a8ac;
+  --color-red-400: #f57780;
+  --color-red-500: #ec4757;
+  --color-red-600: #d82640;
+  --color-red-700: #b71934;
+  --color-red-800: #991832;
+  --color-red-900: #831831;
+  --color-red-950: #831831;
+  --color-rose-50: #fdf4f6;
+  --color-rose-100: #f9e9ec;
+  --color-rose-200: #f4d8dd;
+  --color-rose-300: #e9b8c2;
+  --color-rose-400: #df96a6;
+  --color-rose-500: #cb6881;
+  --color-rose-600: #b54969;
+  --color-rose-700: #973957;
+  --color-rose-800: #7f324d;
+  --color-rose-900: #6a2740;
+  --color-rose-950: #3c1523;
+  --color-hotPink-50: #fdf2f7;
+  --color-hotPink-100: #fde6f0;
+  --color-hotPink-200: #fccee3;
+  --color-hotPink-300: #fba6ca;
+  --color-hotPink-400: #f76fa6;
+  --color-hotPink-500: #f04485;
+  --color-hotPink-600: #e2326c;
+  --color-hotPink-700: #c21448;
+  --color-hotPink-800: #a1133c;
+  --color-hotPink-900: #861535;
+  --color-hotPink-950: #52051b;
+  --color-sepia-50: #fcf5f4;
+  --color-sepia-100: #fae9e9;
+  --color-sepia-200: #f5d6d7;
+  --color-sepia-300: #edb4b6;
+  --color-sepia-400: #e28a8f;
+  --color-sepia-500: #d45f69;
+  --color-sepia-600: #be4051;
+  --color-sepia-700: #9f3142;
+  --color-sepia-800: #862b3c;
+  --color-sepia-900: #6b2433;
+  --color-sepia-950: #320e15;
+  --color-orange-50: #fef7ee;
+  --color-orange-100: #fdedd7;
+  --color-orange-200: #f9d8af;
+  --color-orange-300: #f5bb7c;
+  --color-orange-400: #f09447;
+  --color-orange-500: #ec7723;
+  --color-orange-600: #e15f19;
+  --color-orange-700: #e15f19;
+  --color-orange-800: #92391a;
+  --color-orange-900: #763118;
+  --color-orange-950: #40160a;
+  --color-yellow-50: #f9f2e5;
+  --color-yellow-100: #f5e6bc;
+  --color-yellow-200: #ffe9bc;
+  --color-yellow-300: #ffd174;
+  --color-yellow-400: #f8be4a;
+  --color-yellow-500: #eaad30;
+  --color-yellow-600: #d77908;
+  --color-yellow-700: #b2550b;
+  --color-yellow-800: #91420f;
+  --color-yellow-900: #773610;
+  --color-yellow-950: #441b04;
+  --color-tree-50: #f5f3f1;
+  --color-tree-100: #e5e1dc;
+  --color-tree-200: #ccc5bc;
+  --color-tree-300: #afa395;
+  --color-tree-400: #978878;
+  --color-tree-500: #907e6f;
+  --color-tree-600: #756459;
+  --color-tree-700: #5f4f49;
+  --color-tree-800: #524541;
+  --color-tree-900: #483d3b;
+  --color-tree-950: #282120;
+  --color-brown-50: #f6f3f0;
+  --color-brown-100: #f4edec;
+  --color-brown-200: #ebdfdd;
+  --color-brown-300: #dcc9c5;
+  --color-brown-400: #c6a9a3;
+  --color-brown-500: #b08983;
+  --color-brown-600: #a27e77;
+  --color-brown-700: #7f5d56;
+  --color-brown-800: #6a4f4a;
+  --color-brown-900: #5b4541;
+  --color-brown-950: #2c1e1c;
+  --color-lime-50: #f7ffe5;
+  --color-lime-100: #ecffc7;
+  --color-lime-200: #d9ff95;
+  --color-lime-300: #bdfe58;
+  --color-lime-400: #a1f524;
+  --color-lime-500: #82dc06;
+  --color-lime-600: #63b000;
+  --color-lime-700: #4b8506;
+  --color-lime-800: #3e690b;
+  --color-lime-900: #34580f;
+  --color-lime-950: #193102;
+  --color-green-50: #e7f3eb;
+  --color-green-100: #dff9ea;
+  --color-green-200: #ceecda;
+  --color-green-300: #9cd4b3;
+  --color-green-400: #6ec092;
+  --color-green-500: #3fa46b;
+  --color-green-600: #209754;
+  --color-green-700: #1e7745;
+  --color-green-800: #1d5e3a;
+  --color-green-900: #194e32;
+  --color-green-950: #082b19;
+  --color-timberGreen-50: #f1fcf5;
+  --color-timberGreen-100: #dff9ea;
+  --color-timberGreen-200: #b5dacd;
+  --color-timberGreen-300: #8abfaf;
+  --color-timberGreen-400: #60a18f;
+  --color-timberGreen-500: #468675;
+  --color-timberGreen-600: #366b5f;
+  --color-timberGreen-700: #2e574d;
+  --color-timberGreen-800: #2a4641;
+  --color-timberGreen-900: #1d2f2b;
+  --color-timberGreen-950: #11221e;
+  --color-teal-50: #e2f1f0;
+  --color-teal-100: #c9ebe8;
+  --color-teal-200: #c7e8e5;
+  --color-teal-300: #8ad0d0;
+  --color-teal-400: #67c4c4;
+  --color-teal-500: #39a6a7;
+  --color-teal-600: #258386;
+  --color-teal-700: #1b666a;
+  --color-teal-800: #1a5255;
+  --color-teal-900: #1a4447;
+  --color-teal-950: #09272a;
+  --color-lightBlue-50: #f2f8fd;
+  --color-lightBlue-100: #e3effb;
+  --color-lightBlue-200: #c1e0f6;
+  --color-lightBlue-300: #8bc6ee;
+  --color-lightBlue-400: #3da2e1;
+  --color-lightBlue-500: #258fd2;
+  --color-lightBlue-600: #1771b2;
+  --color-lightBlue-700: #145a90;
+  --color-lightBlue-800: #154d77;
+  --color-lightBlue-900: #174163;
+  --color-lightBlue-950: #062c2d;
+  --color-sea-50: #f4f6fc;
+  --color-sea-100: #e8edf6;
+  --color-sea-200: #cbd9eb;
+  --color-sea-300: #9fb9da;
+  --color-sea-400: #6a93c5;
+  --color-sea-500: #446fa4;
+  --color-sea-600: #375d92;
+  --color-sea-700: #2d4b77;
+  --color-sea-800: #294163;
+  --color-sea-900: #263954;
+  --color-sea-950: #1a2537;
+  --color-blue-50: #f0f6fe;
+  --color-blue-100: #ddeafc;
+  --color-blue-200: #c2dbfb;
+  --color-blue-300: #98c5f8;
+  --color-blue-400: #68a7f2;
+  --color-blue-500: #377ceb;
+  --color-blue-600: #2f68e1;
+  --color-blue-700: #2754ce;
+  --color-blue-800: #20429e;
+  --color-blue-900: #1c2a52;
+  --color-blue-950: #061132;
+  --color-lightPurple-50: #f6f5fd;
+  --color-lightPurple-100: #eeedfa;
+  --color-lightPurple-200: #dddcfd;
+  --color-lightPurple-300: #bdb9ec;
+  --color-lightPurple-400: #aaa1e4;
+  --color-lightPurple-500: #826ce3;
+  --color-lightPurple-600: #7250d7;
+  --color-lightPurple-700: #623dc4;
+  --color-lightPurple-800: #5133a4;
+  --color-lightPurple-900: #442b87;
+  --color-lightPurple-950: #291a5b;
+}
+
+/* Light & Dark Semantic Variables */
+/* Theme Variables Mapped to Tailwind */
+@theme {
+  --color-primary-soft: var(--color-primary-soft);
+  --color-primary-light: var(--color-primary-light);
+  --color-primary-main: var(--color-primary-main);
+  --color-primary-dark: var(--color-primary-dark);
+  --color-primary-strong: var(--color-primary-strong);
+  --color-secondary-soft: var(--color-secondary-soft);
+  --color-secondary-light: var(--color-secondary-light);
+  --color-secondary-main: var(--color-secondary-main);
+  --color-secondary-dark: var(--color-secondary-dark);
+  --color-secondary-strong: var(--color-secondary-strong);
+  --color-body-foreground: var(--color-body-foreground);
+  --color-body-background: var(--color-body-background);
+  --color-neutral-soft: var(--color-neutral-soft);
+  --color-neutral-light: var(--color-neutral-light);
+  --color-neutral-main: var(--color-neutral-main);
+  --color-neutral-dark: var(--color-neutral-dark);
+  --color-neutral-strong: var(--color-neutral-strong);
+  --color-trans-soft: var(--color-trans-soft);
+  --color-trans-light: var(--color-trans-light);
+  --color-trans-main: var(--color-trans-main);
+  --color-trans-dark: var(--color-trans-dark);
+  --color-trans-strong: var(--color-trans-strong);
+  --color-common-black: var(--color-common-black);
+  --color-common-white: var(--color-common-white);
+  --color-common-transparent: var(--color-common-transparent);
+  --color-common-hover: var(--color-common-hover);
+  --color-info-soft: var(--color-info-soft);
+  --color-info-light: var(--color-info-light);
+  --color-info-main: var(--color-info-main);
+  --color-info-dark: var(--color-info-dark);
+  --color-success-soft: var(--color-success-soft);
+  --color-success-light: var(--color-success-light);
+  --color-success-main: var(--color-success-main);
+  --color-success-dark: var(--color-success-dark);
+  --color-warning-soft: var(--color-warning-soft);
+  --color-warning-light: var(--color-warning-light);
+  --color-warning-main: var(--color-warning-main);
+  --color-warning-dark: var(--color-warning-dark);
+  --color-danger-soft: var(--color-danger-soft);
+  --color-danger-light: var(--color-danger-light);
+  --color-danger-main: var(--color-danger-main);
+  --color-danger-dark: var(--color-danger-dark);
+}
+
+/* Light Theme Settings */
+:root,
+.light,
+[data-theme="light"] {
+  --color-primary-soft: var(--color-blue-100);
+  --color-primary-light: var(--color-blue-200);
+  --color-primary-main: var(--color-blue-600);
+  --color-primary-dark: var(--color-blue-800);
+  --color-primary-strong: var(--color-blue-900);
+  --color-secondary-soft: var(--color-lightPurple-100);
+  --color-secondary-light: var(--color-lightPurple-200);
+  --color-secondary-main: var(--color-lightPurple-600);
+  --color-secondary-dark: var(--color-lightPurple-800);
+  --color-secondary-strong: var(--color-lightPurple-950);
+  --color-body-foreground: var(--color-gray-warm-950);
+  --color-body-background: var(--color-gray-cool-50);
+  --color-neutral-soft: var(--color-gray-cool-100);
+  --color-neutral-light: var(--color-gray-cool-200);
+  --color-neutral-main: var(--color-gray-cool-400);
+  --color-neutral-dark: var(--color-gray-cool-500);
+  --color-neutral-strong: var(--color-gray-cool-700);
+  --color-trans-soft: rgba(0, 0, 0, 0.05);
+  --color-trans-light: rgba(0, 0, 0, 0.1);
+  --color-trans-main: rgba(0, 0, 0, 0.2);
+  --color-trans-dark: rgba(0, 0, 0, 0.3);
+  --color-trans-strong: rgba(0, 0, 0, 0.6);
+  --color-common-black: var(--color-gray-warm-950);
+  --color-common-white: var(--color-gray-cool-50);
+  --color-common-transparent: rgba(255, 255, 255, 0);
+  --color-common-hover: rgba(0, 0, 0, 0.05);
+  --color-info-soft: var(--color-teal-50);
+  --color-info-light: var(--color-teal-100);
+  --color-info-main: var(--color-teal-500);
+  --color-info-dark: var(--color-teal-600);
+  --color-success-soft: var(--color-green-50);
+  --color-success-light: var(--color-green-200);
+  --color-success-main: var(--color-green-500);
+  --color-success-dark: var(--color-green-600);
+  --color-warning-soft: var(--color-yellow-50);
+  --color-warning-light: var(--color-yellow-100);
+  --color-warning-main: var(--color-yellow-500);
+  --color-warning-dark: var(--color-yellow-600);
+  --color-danger-soft: var(--color-hotPink-50);
+  --color-danger-light: var(--color-hotPink-200);
+  --color-danger-main: var(--color-hotPink-500);
+  --color-danger-dark: var(--color-hotPink-600);
+}
+
+/* Dark Theme Settings */
+.dark,
+[data-theme="dark"] {
+  --color-primary-soft: var(--color-blue-950);
+  --color-primary-light: var(--color-blue-900);
+  --color-primary-main: var(--color-blue-600);
+  --color-primary-dark: var(--color-blue-500);
+  --color-primary-strong: var(--color-blue-200);
+  --color-secondary-soft: var(--color-lightPurple-950);
+  --color-secondary-light: var(--color-lightPurple-900);
+  --color-secondary-main: var(--color-lightPurple-500);
+  --color-secondary-dark: var(--color-lightPurple-700);
+  --color-secondary-strong: var(--color-lightPurple-950);
+  --color-body-foreground: var(--color-gray-cool-50);
+  --color-body-background: var(--color-bg-06);
+  --color-neutral-soft: var(--color-gray-cool-900);
+  --color-neutral-light: var(--color-gray-cool-700);
+  --color-neutral-main: var(--color-gray-cool-400);
+  --color-neutral-dark: var(--color-gray-cool-300);
+  --color-neutral-strong: var(--color-gray-cool-200);
+  --color-trans-soft: rgba(255, 255, 255, 0.05);
+  --color-trans-light: rgba(255, 255, 255, 0.1);
+  --color-trans-main: rgba(255, 255, 255, 0.2);
+  --color-trans-dark: rgba(255, 255, 255, 0.3);
+  --color-trans-strong: rgba(0, 0, 0, 0.6);
+  --color-common-black: var(--color-gray-warm-950);
+  --color-common-white: var(--color-gray-cool-50);
+  --color-common-transparent: rgba(0, 0, 0, 0);
+  --color-common-hover: rgba(255, 255, 255, 0.05);
+  --color-info-soft: var(--color-teal-950);
+  --color-info-light: var(--color-teal-900);
+  --color-info-main: var(--color-teal-500);
+  --color-info-dark: var(--color-teal-700);
+  --color-success-soft: var(--color-green-950);
+  --color-success-light: var(--color-green-900);
+  --color-success-main: var(--color-green-600);
+  --color-success-dark: var(--color-green-700);
+  --color-warning-soft: var(--color-yellow-950);
+  --color-warning-light: var(--color-yellow-900);
+  --color-warning-main: var(--color-yellow-600);
+  --color-warning-dark: var(--color-yellow-700);
+  --color-danger-soft: var(--color-hotPink-950);
+  --color-danger-light: var(--color-hotPink-900);
+  --color-danger-main: var(--color-hotPink-500);
+  --color-danger-dark: var(--color-hotPink-700);
+}