feat: initial design system v1.0.0 (tokens, mixins, guide)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-02 10:18:16 +05:00
commit 7623425d97
6 changed files with 467 additions and 0 deletions
@@ -0,0 +1,58 @@
+// ============================================
+// @tansu/design-system — Runtime CSS Variables
+//
+// Этот файл ПРОИЗВОДИТ CSS (:root{...}), поэтому подключай его
+// РОВНО ОДИН РАЗ на веб-часть — в корневом .module.scss компонента:
+//
+//   @import '~@tansu/design-system/styles/global';
+//
+// Нужен только если читаешь переменные в рантайме — например
+// в инлайн-стилях (style={{ color: 'var(--gold-500)' }}) или для
+// динамической темизации. Для обычной SCSS-вёрстки хватает _tokens.scss.
+// ============================================
+
+@import 'tokens';
+
+:root {
+  --navy-950: #{$navy-950};
+  --navy-900: #{$navy-900};
+  --navy-800: #{$navy-800};
+  --navy-700: #{$navy-700};
+  --navy-600: #{$navy-600};
+  --navy-100: #{$navy-100};
+  --navy-50:  #{$navy-50};
+
+  --gold-600: #{$gold-600};
+  --gold-500: #{$gold-500};
+  --gold-400: #{$gold-400};
+  --gold-300: #{$gold-300};
+  --gold-100: #{$gold-100};
+  --gold-50:  #{$gold-50};
+
+  --gray-900: #{$gray-900};
+  --gray-700: #{$gray-700};
+  --gray-500: #{$gray-500};
+  --gray-400: #{$gray-400};
+  --gray-300: #{$gray-300};
+  --gray-200: #{$gray-200};
+  --gray-100: #{$gray-100};
+  --gray-50:  #{$gray-50};
+
+  --red-500:   #{$red-500};
+  --red-50:    #{$red-50};
+  --green-600: #{$green-600};
+  --green-50:  #{$green-50};
+  --blue-600:  #{$blue-600};
+  --blue-50:   #{$blue-50};
+  --amber-700: #{$amber-700};
+
+  --sh-1:     #{$sh-1};
+  --sh-2:     #{$sh-2};
+  --sh-3:     #{$sh-3};
+  --sh-gold:  #{$sh-gold};
+  --sh-modal: #{$sh-modal};
+
+  --r-sm: #{$r-sm};
+  --r-md: #{$r-md};
+  --r-lg: #{$r-lg};
+}