@cocoar/ui-tokens 0.1.0-beta.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +76 -0
  2. package/css/all.css +35 -0
  3. package/css/code-block.css +72 -0
  4. package/css/colors-primitives-dark.css +84 -0
  5. package/css/colors-primitives-light.css +75 -0
  6. package/css/colors-usage.css +247 -0
  7. package/css/components-shared.css +42 -0
  8. package/css/elevation.css +30 -0
  9. package/css/focus.css +30 -0
  10. package/css/layers.css +17 -0
  11. package/css/menu.css +53 -0
  12. package/css/motion.css +93 -0
  13. package/css/radius.css +15 -0
  14. package/css/shadows.css +38 -0
  15. package/css/spacing.css +16 -0
  16. package/css/stroke-width.css +12 -0
  17. package/css/type-primitives.css +23 -0
  18. package/css/typography-responsive.css +44 -0
  19. package/css/typography.css +41 -0
  20. package/package.json +38 -0
  21. package/src/index.d.ts +21 -0
  22. package/src/index.js +25 -0
  23. package/src/index.js.map +1 -0
package/README.md ADDED
@@ -0,0 +1,76 @@
1
+ # @cocoar/ui-tokens
2
+
3
+ CSS variables (design tokens) for the Cocoar Design System.
4
+
5
+ ## 📦 What's Inside
6
+
7
+ This library contains a set of CSS files that define Cocoar design tokens as CSS variables.
8
+
9
+ - CSS variables for colors, spacing, typography, radius, shadows, etc.
10
+ - A convenience import file: `@cocoar/ui-tokens/css/all.css`
11
+
12
+ ## 🚀 Usage
13
+
14
+ ### In Global Styles
15
+
16
+ ```css
17
+ /* styles.css */
18
+ @import '@cocoar/ui-tokens/css/all.css';
19
+
20
+ :root {
21
+ /* All design tokens are now available as CSS variables */
22
+ }
23
+ ```
24
+
25
+ ## 🌗 Dark Mode
26
+
27
+ Light mode is the default (`:root`).
28
+
29
+ To enable dark mode, add the `dark-mode` class to a parent element (commonly the `html` element):
30
+
31
+ ```html
32
+ <html class="dark-mode">
33
+ <!-- ... -->
34
+ </html>
35
+ ```
36
+
37
+ ## 📋 Token Categories
38
+
39
+ - **Colors**: `--coar-color-*`
40
+ - **Typography**: `--coar-font-*`, `--coar-text-*`
41
+ - **Spacing**: `--coar-spacing-*`
42
+ - **Borders**: `--coar-border-*`
43
+ - **Shadows**: `--coar-shadow-*`
44
+ - **Breakpoints**: `--coar-breakpoint-*`
45
+
46
+ ## 🏗️ Build Output
47
+
48
+ ```
49
+ dist/libs/ui-tokens/
50
+ ├── css/
51
+ │ └── all.css
52
+ ├── src/
53
+ │ ├── index.js
54
+ │ └── index.d.ts
55
+ └── package.json
56
+ ```
57
+
58
+ ## 📦 Publishing
59
+
60
+ ```bash
61
+ # Build
62
+ nx build ui-tokens
63
+
64
+ # Publish
65
+ nx release publish
66
+ ```
67
+
68
+ ## 🔗 Related Packages
69
+
70
+ - `@cocoar/ui-components` - Angular UI components that use these tokens
71
+ - `@cocoar/logging` - Structured logging (no dependency on tokens)
72
+
73
+ ---
74
+
75
+ **Version:** 0.0.1
76
+ **License:** Apache-2.0
package/css/all.css ADDED
@@ -0,0 +1,35 @@
1
+ /**
2
+ * Cocoar Design System - All Design Tokens
3
+ * Auto-generated from Figma - Do not edit manually
4
+ *
5
+ * Import this file to get all design tokens at once:
6
+ * @import '@cocoar/ui-tokens/css/all.css';
7
+ */
8
+
9
+ /* 1. Farb-Primitives (RAW) */
10
+ @import './colors-primitives-light.css';
11
+ @import './colors-primitives-dark.css';
12
+
13
+ /* 2. Farb-Semantik */
14
+ @import './colors-usage.css';
15
+
16
+ /* 3. Typografie-Primitives & -Semantik */
17
+ @import './type-primitives.css'; /* Font families, weights, etc. */
18
+ @import './typography.css'; /* Headings, titles, body, etc. */
19
+
20
+ /* 4. Layout / Shape-Primitives */
21
+ @import './spacing.css';
22
+ @import './radius.css';
23
+ @import './stroke-width.css';
24
+
25
+ /* 5. Motion & Shadows & Focus */
26
+ @import './motion.css';
27
+ @import './shadows.css';
28
+ @import './elevation.css';
29
+ @import './layers.css';
30
+ @import './focus.css';
31
+
32
+ /* 6. Shared Component Tokens */
33
+ @import './components-shared.css';
34
+ @import './code-block.css';
35
+ @import './menu.css';
package/css/code-block.css ADDED
@@ -0,0 +1,72 @@
1
+ /**
2
+ * Cocoar Design System - Code Block Tokens
3
+ * Theming tokens for the coar-code-block component
4
+ *
5
+ * These tokens allow consumers to customize code block appearance
6
+ * from a central location for consistent theming.
7
+ */
8
+
9
+ :root {
10
+ /* ========================================
11
+ CODE BLOCK - LIGHT THEME (Default)
12
+ ======================================== */
13
+
14
+ /* Layout */
15
+ --coar-code-block-bg: #f8f9fa;
16
+ --coar-code-block-header-bg: #f0f1f2;
17
+ --coar-code-block-border: #e1e4e8;
18
+
19
+ /* Text */
20
+ --coar-code-block-text: #24292e;
21
+ --coar-code-block-text-muted: #6a737d;
22
+
23
+ /* Interactive */
24
+ --coar-code-block-button-bg-hover: rgba(0, 0, 0, 0.08);
25
+
26
+ /* Syntax Highlighting - Light (GitHub inspired) */
27
+ --coar-code-block-keyword: #d73a49;
28
+ --coar-code-block-string: #032f62;
29
+ --coar-code-block-number: #005cc5;
30
+ --coar-code-block-comment: #6a737d;
31
+ --coar-code-block-function: #6f42c1;
32
+ --coar-code-block-class: #22863a;
33
+ --coar-code-block-property: #005cc5;
34
+ --coar-code-block-operator: #24292e;
35
+ --coar-code-block-punctuation: #24292e;
36
+ --coar-code-block-tag: #22863a;
37
+ --coar-code-block-attr-name: #6f42c1;
38
+ --coar-code-block-attr-value: #032f62;
39
+ }
40
+
41
+ /* ========================================
42
+ CODE BLOCK - DARK THEME
43
+ ======================================== */
44
+
45
+ .dark-mode,
46
+ [data-theme='dark'] {
47
+ /* Layout */
48
+ --coar-code-block-bg: #1e1e1e;
49
+ --coar-code-block-header-bg: #2d2d2d;
50
+ --coar-code-block-border: #3d3d3d;
51
+
52
+ /* Text */
53
+ --coar-code-block-text: #d4d4d4;
54
+ --coar-code-block-text-muted: #888888;
55
+
56
+ /* Interactive */
57
+ --coar-code-block-button-bg-hover: rgba(255, 255, 255, 0.12);
58
+
59
+ /* Syntax Highlighting - Dark (VS Code inspired) */
60
+ --coar-code-block-keyword: #569cd6;
61
+ --coar-code-block-string: #ce9178;
62
+ --coar-code-block-number: #b5cea8;
63
+ --coar-code-block-comment: #6a9955;
64
+ --coar-code-block-function: #dcdcaa;
65
+ --coar-code-block-class: #4ec9b0;
66
+ --coar-code-block-property: #9cdcfe;
67
+ --coar-code-block-operator: #d4d4d4;
68
+ --coar-code-block-punctuation: #808080;
69
+ --coar-code-block-tag: #569cd6;
70
+ --coar-code-block-attr-name: #9cdcfe;
71
+ --coar-code-block-attr-value: #ce9178;
72
+ }
package/css/colors-primitives-dark.css ADDED
@@ -0,0 +1,84 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Color Primitives - Dark Mode
4
+ * Manually tuned for optimal dark theme appearance
5
+ */
6
+
7
+ :root.dark-mode,
8
+ .dark-mode {
9
+ --coar-color-black: #000000;
10
+ --coar-color-white: #ffffff;
11
+
12
+ /* Gray scale for dark mode - adjusted for better contrast */
13
+ --coar-color-gray-50: #18181b; /* Page background - slightly lighter */
14
+ --coar-color-gray-100: #27272a; /* Secondary background - more contrast */
15
+ --coar-color-gray-200: #3f3f46; /* Tertiary / cards */
16
+ --coar-color-gray-300: #52525b;
17
+ --coar-color-gray-400: #71717a;
18
+ --coar-color-gray-500: #a1a1aa;
19
+ --coar-color-gray-600: #d4d4d8;
20
+ --coar-color-gray-700: #e4e4e7;
21
+ --coar-color-gray-800: #f4f4f5;
22
+ --coar-color-gray-900: #fafafa;
23
+
24
+ /* Slate for brand/accent areas in dark mode */
25
+ --coar-color-slate-50: #0f172a;
26
+ --coar-color-slate-100: #1e293b;
27
+ --coar-color-slate-200: #334155;
28
+ --coar-color-slate-300: #475569;
29
+ --coar-color-slate-400: #64748b;
30
+ --coar-color-slate-500: #94a3b8;
31
+ --coar-color-slate-600: #b8c5d6;
32
+ --coar-color-slate-700: #cbd5e1;
33
+ --coar-color-slate-800: #e2e8f0;
34
+ --coar-color-slate-900: #f1f5f9;
35
+
36
+ /* Accent Colors - Primary brand accent for dark mode
37
+ THEMING: Override these to customize the primary accent color */
38
+ --coar-color-accent-50: #0a487a;
39
+ --coar-color-accent-100: #0f5a99;
40
+ --coar-color-accent-200: #156db7;
41
+ --coar-color-accent-300: #1e80d1;
42
+ --coar-color-accent-400: #278fe4;
43
+ --coar-color-accent-500: #459fea;
44
+ --coar-color-accent-600: #6eb4ef;
45
+ --coar-color-accent-700: #9fcdf5;
46
+ --coar-color-accent-800: #cde6fa;
47
+ --coar-color-accent-900: #e8f4fc;
48
+
49
+ /* Green - success colors for dark mode */
50
+ --coar-color-green-50: #0e3a1f;
51
+ --coar-color-green-100: #134f2b;
52
+ --coar-color-green-200: #186f39;
53
+ --coar-color-green-300: #1e8f48;
54
+ --coar-color-green-400: #25b95a;
55
+ --coar-color-green-500: #4ac771;
56
+ --coar-color-green-600: #76d591;
57
+ --coar-color-green-700: #a4e3b5;
58
+ --coar-color-green-800: #d2f1da;
59
+ --coar-color-green-900: #e8f9ed;
60
+
61
+ /* Red - error colors for dark mode */
62
+ --coar-color-red-50: #4d1414;
63
+ --coar-color-red-100: #6f1d1d;
64
+ --coar-color-red-200: #922626;
65
+ --coar-color-red-300: #b52f2f;
66
+ --coar-color-red-400: #d63b3b;
67
+ --coar-color-red-500: #e45555;
68
+ --coar-color-red-600: #ec7c7c;
69
+ --coar-color-red-700: #f3a8a8;
70
+ --coar-color-red-800: #f9d3d3;
71
+ --coar-color-red-900: #fdecec;
72
+
73
+ /* Yellow - warning colors for dark mode */
74
+ --coar-color-amber-50: #402908;
75
+ --coar-color-amber-100: #66430f;
76
+ --coar-color-amber-200: #996217;
77
+ --coar-color-amber-300: #cc821f;
78
+ --coar-color-amber-400: #ffa326;
79
+ --coar-color-amber-500: #ffba4d;
80
+ --coar-color-amber-600: #ffce78;
81
+ --coar-color-amber-700: #ffdfa0;
82
+ --coar-color-amber-800: #ffeec2;
83
+ --coar-color-amber-900: #fff8e6;
84
+ }
package/css/colors-primitives-light.css ADDED
@@ -0,0 +1,75 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Color Primitives - Light Mode
4
+ * Auto-generated from Figma - Do not edit manually
5
+ */
6
+
7
+ :root,
8
+ .light-mode {
9
+ --coar-color-black: #000000;
10
+ --coar-color-gray-100: #ededed;
11
+ --coar-color-gray-200: #d9d9d9;
12
+ --coar-color-gray-300: #c8c8c8;
13
+ --coar-color-gray-400: #adadad;
14
+ --coar-color-gray-50: #f7f7f7;
15
+ --coar-color-gray-500: #999999;
16
+ --coar-color-gray-600: #888888;
17
+ --coar-color-gray-700: #7b7b7b;
18
+ --coar-color-gray-800: #676767;
19
+ --coar-color-gray-900: #545454;
20
+ --coar-color-green-50: #e8f9ed;
21
+ --coar-color-green-100: #d2f1da;
22
+ --coar-color-green-200: #a4e3b5;
23
+ --coar-color-green-300: #76d591;
24
+ --coar-color-green-400: #4ac771;
25
+ --coar-color-green-500: #25b95a;
26
+ --coar-color-green-600: #1e8f48;
27
+ --coar-color-green-700: #186f39;
28
+ --coar-color-green-800: #134f2b;
29
+ --coar-color-green-900: #0e3a1f;
30
+ --coar-color-red-50: #fdecec;
31
+ --coar-color-red-100: #f9d3d3;
32
+ --coar-color-red-200: #f3a8a8;
33
+ --coar-color-red-300: #ec7c7c;
34
+ --coar-color-red-400: #e45555;
35
+ --coar-color-red-500: #d63b3b;
36
+ --coar-color-red-600: #b52f2f;
37
+ --coar-color-red-700: #922626;
38
+ --coar-color-red-800: #6f1d1d;
39
+ --coar-color-red-900: #4d1414;
40
+ --coar-color-slate-100: #e3e6ec;
41
+ --coar-color-slate-200: #c6cad4;
42
+ --coar-color-slate-300: #a6adbc;
43
+ --coar-color-slate-400: #8b94a7;
44
+ --coar-color-slate-50: #f0f4fc;
45
+ --coar-color-slate-500: #79849b;
46
+ --coar-color-slate-600: #707d97;
47
+ --coar-color-slate-700: #5e6b84;
48
+ --coar-color-slate-800: #525e76;
49
+ --coar-color-slate-900: #44526b;
50
+ --coar-color-white: #ffffff;
51
+
52
+ /* Accent Colors - Primary brand accent (Cocoar blue)
53
+ THEMING: Override these to customize the primary accent color */
54
+ --coar-color-accent-50: #e8f4fc;
55
+ --coar-color-accent-100: #cde6fa;
56
+ --coar-color-accent-200: #9fcdf5;
57
+ --coar-color-accent-300: #6eb4ef;
58
+ --coar-color-accent-400: #459fea;
59
+ --coar-color-accent-500: #278fe4;
60
+ --coar-color-accent-600: #1e80d1;
61
+ --coar-color-accent-700: #156db7;
62
+ --coar-color-accent-800: #0f5a99;
63
+ --coar-color-accent-900: #0a487a;
64
+
65
+ --coar-color-amber-50: #fff8e6;
66
+ --coar-color-amber-100: #ffeec2;
67
+ --coar-color-amber-200: #ffdfa0;
68
+ --coar-color-amber-300: #ffce78;
69
+ --coar-color-amber-400: #ffba4d;
70
+ --coar-color-amber-500: #ffa326;
71
+ --coar-color-amber-600: #cc821f;
72
+ --coar-color-amber-700: #996217;
73
+ --coar-color-amber-800: #66430f;
74
+ --coar-color-amber-900: #402908;
75
+ }
package/css/colors-usage.css ADDED
@@ -0,0 +1,247 @@
1
+ /**
2
+ * Cocoar Design System - Semantic Color Tokens
3
+ *
4
+ * Maps primitive colors to semantic usage contexts.
5
+ * Uses CSS variable references for automatic dark mode support.
6
+ *
7
+ * NAMING PATTERN:
8
+ * --coar-{usage}-{category}-{variant}
9
+ *
10
+ * Usage: background | border | text | icon
11
+ * Category: neutral | brand | accent | semantic-{status}
12
+ * Variant: primary | secondary | tertiary | bold | subtle | disabled
13
+ */
14
+
15
+ /* ============================================================================
16
+ LIGHT MODE (default)
17
+ ============================================================================ */
18
+
19
+ :root,
20
+ .light-mode {
21
+ /* ==========================================================================
22
+ NEUTRAL - Default UI colors (gray scale)
23
+ ========================================================================== */
24
+
25
+ /* Background */
26
+ --coar-background-neutral-primary: var(--coar-color-white);
27
+ --coar-background-neutral-secondary: var(--coar-color-gray-100);
28
+ --coar-background-neutral-tertiary: var(--coar-color-gray-200);
29
+ --coar-background-neutral-disabled: var(--coar-color-gray-300);
30
+
31
+ /* Text */
32
+ --coar-text-neutral-primary: var(--coar-color-gray-900);
33
+ --coar-text-neutral-secondary: var(--coar-color-gray-800);
34
+ --coar-text-neutral-tertiary: var(--coar-color-gray-700);
35
+ --coar-text-neutral-disabled: var(--coar-color-gray-500);
36
+
37
+ /* Border */
38
+ --coar-border-neutral-primary: var(--coar-color-gray-900);
39
+ --coar-border-neutral-secondary: var(--coar-color-gray-800);
40
+ --coar-border-neutral-tertiary: var(--coar-color-gray-200);
41
+
42
+ /* Icon */
43
+ --coar-icon-neutral-primary: var(--coar-color-gray-900);
44
+ --coar-icon-neutral-secondary: var(--coar-color-gray-800);
45
+ --coar-icon-neutral-tertiary: var(--coar-color-gray-700);
46
+ --coar-icon-neutral-disabled: var(--coar-color-gray-500);
47
+
48
+ /* ==========================================================================
49
+ BRAND - Company identity colors (slate)
50
+ ========================================================================== */
51
+
52
+ /* Background */
53
+ --coar-background-brand-primary: var(--coar-color-slate-500);
54
+ --coar-background-brand-secondary: var(--coar-color-slate-200);
55
+ --coar-background-brand-tertiary: var(--coar-color-slate-50);
56
+
57
+ /* Text */
58
+ --coar-text-brand-primary: var(--coar-color-slate-800);
59
+
60
+ /* Border */
61
+ --coar-border-brand-primary: var(--coar-color-slate-800);
62
+
63
+ /* Icon */
64
+ --coar-icon-brand-primary: var(--coar-color-slate-800);
65
+
66
+ /* ==========================================================================
67
+ ACCENT - Interactive/action colors (themeable)
68
+ Used for: primary buttons, links, focus rings, active states
69
+ THEMING: Override --coar-color-accent-* primitives to change these
70
+ ========================================================================== */
71
+
72
+ /* Background */
73
+ --coar-background-accent-primary: var(--coar-color-accent-700);
74
+ --coar-background-accent-secondary: var(--coar-color-accent-200);
75
+ --coar-background-accent-tertiary: var(--coar-color-accent-50);
76
+ --coar-background-accent-hover: var(--coar-color-accent-800);
77
+ --coar-background-accent-active: var(--coar-color-accent-900);
78
+
79
+ /* Text */
80
+ --coar-text-accent-primary: var(--coar-color-accent-700);
81
+ --coar-text-accent-secondary: var(--coar-color-accent-600);
82
+
83
+ /* Border */
84
+ --coar-border-accent-primary: var(--coar-color-accent-500);
85
+ --coar-border-accent-secondary: var(--coar-color-accent-400);
86
+
87
+ /* Icon */
88
+ --coar-icon-accent-primary: var(--coar-color-accent-700);
89
+
90
+ /* ==========================================================================
91
+ SEMANTIC - Status/feedback colors (success, error, warning, info)
92
+ Bold = high emphasis (solid backgrounds, strong text)
93
+ Subtle = low emphasis (light backgrounds, muted borders)
94
+ ========================================================================== */
95
+
96
+ /* Success (green) */
97
+ --coar-background-semantic-success-bold: var(--coar-color-green-600);
98
+ --coar-background-semantic-success-subtle: var(--coar-color-green-100);
99
+ --coar-text-semantic-success-bold: var(--coar-color-green-800);
100
+ --coar-text-semantic-success-subtle: var(--coar-color-green-100);
101
+ --coar-border-semantic-success-bold: var(--coar-color-green-800);
102
+ --coar-border-semantic-success-subtle: var(--coar-color-green-200);
103
+ --coar-icon-semantic-success-bold: var(--coar-color-green-800);
104
+ --coar-icon-semantic-success-subtle: var(--coar-color-green-100);
105
+
106
+ /* Error (red) */
107
+ --coar-background-semantic-error-bold: var(--coar-color-red-600);
108
+ --coar-background-semantic-error-subtle: var(--coar-color-red-100);
109
+ --coar-text-semantic-error-bold: var(--coar-color-red-800);
110
+ --coar-text-semantic-error-subtle: var(--coar-color-red-100);
111
+ --coar-border-semantic-error-bold: var(--coar-color-red-800);
112
+ --coar-border-semantic-error-subtle: var(--coar-color-red-200);
113
+ --coar-icon-semantic-error-bold: var(--coar-color-red-800);
114
+ --coar-icon-semantic-error-subtle: var(--coar-color-red-100);
115
+
116
+ /* Warning (amber) */
117
+ --coar-background-semantic-warning-bold: var(--coar-color-amber-600);
118
+ --coar-background-semantic-warning-subtle: var(--coar-color-amber-100);
119
+ --coar-text-semantic-warning-bold: var(--coar-color-amber-800);
120
+ --coar-text-semantic-warning-subtle: var(--coar-color-amber-100);
121
+ --coar-border-semantic-warning-bold: var(--coar-color-amber-800);
122
+ --coar-border-semantic-warning-subtle: var(--coar-color-amber-200);
123
+ --coar-icon-semantic-warning-bold: var(--coar-color-amber-800);
124
+ --coar-icon-semantic-warning-subtle: var(--coar-color-amber-100);
125
+
126
+ /* Info (slate blue) */
127
+ --coar-background-semantic-info-bold: var(--coar-color-slate-200);
128
+ --coar-background-semantic-info-subtle: var(--coar-color-slate-100);
129
+ --coar-text-semantic-info-bold: var(--coar-color-slate-800);
130
+ --coar-text-semantic-info-subtle: var(--coar-color-slate-100);
131
+ --coar-border-semantic-info-bold: var(--coar-color-slate-800);
132
+ --coar-border-semantic-info-subtle: var(--coar-color-slate-200);
133
+ --coar-icon-semantic-info-bold: var(--coar-color-slate-800);
134
+ --coar-icon-semantic-info-subtle: var(--coar-color-slate-100);
135
+
136
+ /* ==========================================================================
137
+ SPECIAL PURPOSE
138
+ ========================================================================== */
139
+
140
+ /* White/light text for use on bold/colored surfaces
141
+ Used for: text on primary buttons, badges, bold semantic backgrounds */
142
+ --coar-text-on-bold: var(--coar-color-white);
143
+
144
+ /* ==========================================================================
145
+ SURFACE - Elevated surfaces for form controls and interactive elements
146
+ In light mode, inputs are white. In dark mode, they're slightly elevated.
147
+ ========================================================================== */
148
+
149
+ /* Input surfaces - backgrounds for form controls */
150
+ --coar-surface-input: var(--coar-color-white);
151
+ --coar-surface-input-disabled: var(--coar-color-gray-100);
152
+
153
+ /* Input borders - more visible than neutral-tertiary */
154
+ --coar-border-input: var(--coar-color-gray-300);
155
+ --coar-border-input-hover: var(--coar-color-gray-400);
156
+ }
157
+
158
+ /* ============================================================================
159
+ DARK MODE
160
+ Only override values that change - inherits everything else from light mode
161
+ ============================================================================ */
162
+
163
+ :root.dark-mode,
164
+ .dark-mode {
165
+ /* ==========================================================================
166
+ NEUTRAL - Invert the gray scale
167
+ Background uses lighter grays to allow for shadows and depth
168
+ ========================================================================== */
169
+
170
+ /* Background */
171
+ --coar-background-neutral-primary: var(--coar-color-gray-200);
172
+ --coar-background-neutral-secondary: var(--coar-color-gray-100);
173
+ --coar-background-neutral-tertiary: var(--coar-color-gray-50);
174
+
175
+ /* Text */
176
+ --coar-text-neutral-primary: var(--coar-color-gray-900);
177
+ --coar-text-neutral-secondary: var(--coar-color-gray-700);
178
+ --coar-text-neutral-tertiary: var(--coar-color-gray-600);
179
+
180
+ /* Border */
181
+ --coar-border-neutral-primary: var(--coar-color-gray-700);
182
+ --coar-border-neutral-secondary: var(--coar-color-gray-600);
183
+ --coar-border-neutral-tertiary: var(--coar-color-gray-300);
184
+
185
+ /* Icon */
186
+ --coar-icon-neutral-primary: var(--coar-color-gray-900);
187
+ --coar-icon-neutral-secondary: var(--coar-color-gray-700);
188
+ --coar-icon-neutral-tertiary: var(--coar-color-gray-600);
189
+
190
+ /* ==========================================================================
191
+ ACCENT - Lighter values for visibility on dark backgrounds
192
+ ========================================================================== */
193
+
194
+ /* Background */
195
+ --coar-background-accent-primary: var(--coar-color-accent-500);
196
+ --coar-background-accent-secondary: var(--coar-color-accent-300);
197
+ --coar-background-accent-tertiary: var(--coar-color-accent-100);
198
+ --coar-background-accent-hover: var(--coar-color-accent-400);
199
+ --coar-background-accent-active: var(--coar-color-accent-300);
200
+
201
+ /* Text */
202
+ --coar-text-accent-primary: var(--coar-color-accent-500);
203
+ --coar-text-accent-secondary: var(--coar-color-accent-400);
204
+
205
+ /* ==========================================================================
206
+ SEMANTIC - Adjusted for dark backgrounds
207
+ Bold backgrounds are slightly lighter for better contrast
208
+ ========================================================================== */
209
+
210
+ /* Success */
211
+ --coar-background-semantic-success-bold: var(--coar-color-green-500);
212
+ --coar-background-semantic-success-subtle: var(--coar-color-green-200);
213
+ --coar-border-semantic-success-bold: var(--coar-color-green-600);
214
+ --coar-border-semantic-success-subtle: var(--coar-color-green-300);
215
+
216
+ /* Error */
217
+ --coar-background-semantic-error-bold: var(--coar-color-red-500);
218
+ --coar-background-semantic-error-subtle: var(--coar-color-red-200);
219
+ --coar-border-semantic-error-bold: var(--coar-color-red-600);
220
+ --coar-border-semantic-error-subtle: var(--coar-color-red-300);
221
+
222
+ /* Warning */
223
+ --coar-background-semantic-warning-bold: var(--coar-color-amber-400);
224
+ --coar-background-semantic-warning-subtle: var(--coar-color-amber-200);
225
+ --coar-border-semantic-warning-bold: var(--coar-color-amber-500);
226
+ --coar-border-semantic-warning-subtle: var(--coar-color-amber-300);
227
+
228
+ /* Info */
229
+ --coar-background-semantic-info-bold: var(--coar-color-slate-400);
230
+ --coar-background-semantic-info-subtle: var(--coar-color-slate-300);
231
+ --coar-border-semantic-info-bold: var(--coar-color-slate-600);
232
+ --coar-border-semantic-info-subtle: var(--coar-color-slate-400);
233
+
234
+ /* ==========================================================================
235
+ SURFACE - Input surfaces in dark mode are darker than cards
236
+ Creates visual depth hierarchy: card (gray-100) → input (gray-50)
237
+ This mirrors light mode: card (gray-100) → input (white)
238
+ ========================================================================== */
239
+
240
+ /* Input surfaces - darker than cards for inset appearance */
241
+ --coar-surface-input: var(--coar-color-gray-50);
242
+ --coar-surface-input-disabled: var(--coar-color-gray-100);
243
+
244
+ /* Input borders - visible on dark backgrounds */
245
+ --coar-border-input: var(--coar-color-gray-400);
246
+ --coar-border-input-hover: var(--coar-color-gray-500);
247
+ }
package/css/components-shared.css ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Cocoar Design System - Shared Component Size Tokens
3
+ *
4
+ * These tokens define the shared sizing system used across
5
+ * buttons, inputs, labels, and other form elements.
6
+ *
7
+ * Component-specific tokens (button, input, label, card, etc.)
8
+ * are now defined in their respective component token files
9
+ * within @cocoar/ui-components.
10
+ */
11
+
12
+ :root {
13
+ /* ========================================
14
+ COMPONENT SIZE SYSTEM
15
+ Shared sizing tokens for consistent component sizes
16
+ across buttons, inputs, labels, and other form elements
17
+ ======================================== */
18
+
19
+ /* Component Heights */
20
+ --coar-component-xs-height: 27px;
21
+ --coar-component-sm-height: 32px;
22
+ --coar-component-md-height: 40px;
23
+ --coar-component-lg-height: 48px;
24
+
25
+ /* Component Font Sizes */
26
+ --coar-component-xs-font-size: 11px;
27
+ --coar-component-sm-font-size: 13px;
28
+ --coar-component-md-font-size: 14px;
29
+ --coar-component-lg-font-size: 16px;
30
+
31
+ /* Component Label Font Sizes (slightly smaller for labels) */
32
+ --coar-component-xs-label-font-size: 11px;
33
+ --coar-component-sm-label-font-size: 13px;
34
+ --coar-component-md-label-font-size: 14px;
35
+ --coar-component-lg-label-font-size: 15px;
36
+
37
+ /* Component Label Margins */
38
+ --coar-component-xs-label-margin: 4px;
39
+ --coar-component-sm-label-margin: 6px;
40
+ --coar-component-md-label-margin: 8px;
41
+ --coar-component-lg-label-margin: 10px;
42
+ }
package/css/elevation.css ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Cocoar Design System - Elevation Tokens
3
+ *
4
+ * Semantic elevation levels for UI depth hierarchy.
5
+ * Elevation describes how "raised" an element appears from the surface.
6
+ *
7
+ * These tokens reference shadow primitives from shadows.css,
8
+ * providing a semantic layer for component usage.
9
+ */
10
+
11
+ :root {
12
+ /* ========================================
13
+ SEMANTIC ELEVATION (usage intent)
14
+ ======================================== */
15
+
16
+ /* No elevation - flat on the surface */
17
+ --coar-elevation-none: none;
18
+
19
+ /* Low elevation - subtle lift for grouped content */
20
+ --coar-elevation-low: var(--coar-shadow-s);
21
+
22
+ /* Medium elevation - cards, panels, raised containers */
23
+ --coar-elevation-medium: var(--coar-shadow-m);
24
+
25
+ /* High elevation - dropdowns, popovers, tooltips */
26
+ --coar-elevation-high: var(--coar-shadow-l);
27
+
28
+ /* Highest elevation - modals, dialogs, overlays */
29
+ --coar-elevation-highest: var(--coar-shadow-xl);
30
+ }
package/css/focus.css ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Focus Tokens
3
+ * Part of the global token set (not component-specific)
4
+ * Used by: buttons, inputs, dropdowns, checkboxes, tabs, lists, menus, etc.
5
+ */
6
+
7
+ :root {
8
+ /* The visible color of the focus ring */
9
+ --coar-focus-color: var(--coar-color-accent-300);
10
+
11
+ /* The width of the focus outline or ring */
12
+ --coar-focus-width: 3px;
13
+
14
+ /* Optional offset between the component and the ring */
15
+ --coar-focus-offset: 2px;
16
+
17
+ /* Style: solid, dashed, dotted (rare), or even none */
18
+ --coar-focus-style: solid;
19
+
20
+ /* If you want a shadow-based focus instead of outline */
21
+ --coar-focus-shadow: 0 0 0 var(--coar-focus-width) var(--coar-focus-color);
22
+ }
23
+
24
+ /* Dark mode override */
25
+ :root.dark-mode,
26
+ .dark-mode {
27
+ /* Typically slightly brighter or desaturated…
28
+ You can tune this later via semantic building blocks */
29
+ --coar-focus-color: var(--coar-color-accent-300);
30
+ }
package/css/layers.css ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Cocoar Design System - Layering Tokens
3
+ *
4
+ * Z-index values used for UI layering.
5
+ *
6
+ * Notes:
7
+ * - These are intentionally minimal. Overlays manage stacking by adding small runtime offsets.
8
+ * - Backdrop must always be below its overlay host.
9
+ */
10
+
11
+ :root {
12
+ /* Overlay hosts (menus, tooltips, dialogs, etc.) */
13
+ --coar-z-overlay: 1000;
14
+
15
+ /* Modal backdrop behind overlays */
16
+ --coar-z-overlay-backdrop: 999;
17
+ }
package/css/menu.css ADDED
@@ -0,0 +1,53 @@
1
+ /**
2
+ * Cocoar Design System - Menu Tokens
3
+ * Theming tokens for coar-menu and menu items.
4
+ *
5
+ * Default styling optimized for context menus (overlays).
6
+ * For sidebar navigation, these can be overridden via CSS variables.
7
+ */
8
+
9
+ :root {
10
+ /* Menu container background - clean white for context menus */
11
+ --coar-menu-background: var(--coar-background-neutral-primary, #ffffff);
12
+
13
+ /* Item interactive states - subtle hover, accent for active */
14
+ --coar-menu-item-background-hover: var(--coar-background-neutral-secondary, #f5f5f5);
15
+ --coar-menu-item-background-focus: var(--coar-background-neutral-secondary, #f5f5f5);
16
+ --coar-menu-item-background-open: var(--coar-background-accent-tertiary, #e6f0ff);
17
+ --coar-menu-item-background-active: var(--coar-background-accent-tertiary, #e6f0ff);
18
+
19
+ /* Text color for active items */
20
+ --coar-menu-item-text-active: var(--coar-text-accent-primary, #0066cc);
21
+ }
22
+
23
+ :root.dark-mode,
24
+ .dark-mode,
25
+ [data-theme='dark'] {
26
+ /* Menu container background - dark, subtle for context menus */
27
+ --coar-menu-background: #1e1e1e;
28
+
29
+ /* Item interactive states - subtle hover/active for context menus */
30
+ --coar-menu-item-background-hover: #2d2d2d;
31
+ --coar-menu-item-background-focus: #2d2d2d;
32
+ --coar-menu-item-background-open: #2d2d2d;
33
+ --coar-menu-item-background-active: #2d2d2d;
34
+ }
35
+
36
+ /* Sidebar variant - darker, more grounded colors for permanent navigation */
37
+ .coar-menu--sidebar {
38
+ --coar-menu-background: var(--coar-background-neutral-secondary, #ededed);
39
+ --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary, #d9d9d9);
40
+ --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary, #d9d9d9);
41
+ --coar-menu-item-background-open: var(--coar-background-neutral-tertiary, #d9d9d9);
42
+ --coar-menu-item-background-active: var(--coar-background-neutral-tertiary, #d9d9d9);
43
+ }
44
+
45
+ :root.dark-mode .coar-menu--sidebar,
46
+ .dark-mode .coar-menu--sidebar,
47
+ [data-theme='dark'] .coar-menu--sidebar {
48
+ --coar-menu-background: var(--coar-background-neutral-secondary, #27272a);
49
+ --coar-menu-item-background-hover: var(--coar-background-neutral-tertiary, #3f3f46);
50
+ --coar-menu-item-background-focus: var(--coar-background-neutral-tertiary, #3f3f46);
51
+ --coar-menu-item-background-open: var(--coar-background-neutral-tertiary, #3f3f46);
52
+ --coar-menu-item-background-active: var(--coar-background-neutral-tertiary, #3f3f46);
53
+ }
package/css/motion.css ADDED
@@ -0,0 +1,93 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Motion / Animation
4
+ * Consistent timing and easing for UI transitions
5
+ */
6
+
7
+ :root {
8
+ /* ========================================
9
+ DURATION
10
+ ========================================
11
+ How long animations take to complete.
12
+ Use shorter durations for small/simple changes,
13
+ longer for complex/large movements.
14
+ */
15
+
16
+ /* Instant - for color changes, opacity */
17
+ --coar-duration-instant: 0ms;
18
+
19
+ /* Fast - micro-interactions, hover states, focus rings */
20
+ --coar-duration-fast: 100ms;
21
+
22
+ /* Normal - buttons, inputs, small movements */
23
+ --coar-duration-normal: 200ms;
24
+
25
+ /* Slow - dropdowns, panels, medium movements */
26
+ --coar-duration-slow: 300ms;
27
+
28
+ /* Slower - modals, large overlays, page transitions */
29
+ --coar-duration-slower: 400ms;
30
+
31
+ /* Slowest - complex animations, onboarding */
32
+ --coar-duration-slowest: 500ms;
33
+
34
+ /* ========================================
35
+ EASING
36
+ ========================================
37
+ How animations accelerate and decelerate.
38
+ Based on Material Design motion principles.
39
+ */
40
+
41
+ /* Linear - constant speed, use sparingly */
42
+ --coar-ease-linear: linear;
43
+
44
+ /* Ease Out - starts fast, ends slow (entering elements) */
45
+ --coar-ease-out: cubic-bezier(0, 0, 0.2, 1);
46
+
47
+ /* Ease In - starts slow, ends fast (exiting elements) */
48
+ --coar-ease-in: cubic-bezier(0.4, 0, 1, 1);
49
+
50
+ /* Ease In-Out - slow start and end (moving elements) */
51
+ --coar-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
52
+
53
+ /* Bounce - slight overshoot for playful interactions */
54
+ --coar-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
55
+
56
+ /* ========================================
57
+ COMMON TRANSITIONS
58
+ ========================================
59
+ Pre-composed transitions for common use cases.
60
+ */
61
+
62
+ /* Default transition for most interactive elements */
63
+ --coar-transition-default: all var(--coar-duration-normal) var(--coar-ease-out);
64
+
65
+ /* Fast transition for hover/focus states */
66
+ --coar-transition-fast: all var(--coar-duration-fast) var(--coar-ease-out);
67
+
68
+ /* Color-only transitions */
69
+ --coar-transition-colors: color var(--coar-duration-fast) var(--coar-ease-out),
70
+ background-color var(--coar-duration-fast) var(--coar-ease-out),
71
+ border-color var(--coar-duration-fast) var(--coar-ease-out);
72
+
73
+ /* Transform transitions (scale, translate) */
74
+ --coar-transition-transform: transform var(--coar-duration-normal) var(--coar-ease-out);
75
+
76
+ /* Opacity transitions */
77
+ --coar-transition-opacity: opacity var(--coar-duration-normal) var(--coar-ease-out);
78
+
79
+ /* Shadow transitions (elevation changes) */
80
+ --coar-transition-shadow: box-shadow var(--coar-duration-normal) var(--coar-ease-out);
81
+ }
82
+
83
+ /* Reduced motion preference - respect user settings */
84
+ @media (prefers-reduced-motion: reduce) {
85
+ :root {
86
+ --coar-duration-instant: 0ms;
87
+ --coar-duration-fast: 0ms;
88
+ --coar-duration-normal: 0ms;
89
+ --coar-duration-slow: 0ms;
90
+ --coar-duration-slower: 0ms;
91
+ --coar-duration-slowest: 0ms;
92
+ }
93
+ }
package/css/radius.css ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Border Radius
4
+ * Auto-generated from Figma - Do not edit manually
5
+ */
6
+
7
+ :root {
8
+ --coar-radius-full: 999px;
9
+ --coar-radius-l: 12px;
10
+ --coar-radius-m: 8px;
11
+ --coar-radius-s: 6px;
12
+ --coar-radius-xl: 16px;
13
+ --coar-radius-xs: 4px;
14
+ --coar-radius-xxs: 2px;
15
+ }
package/css/shadows.css ADDED
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Shadows / Elevation
4
+ * For depth and layering in the UI
5
+ */
6
+
7
+ :root {
8
+ /* Shadow Colors - using rgba for transparency */
9
+ --coar-shadow-color: rgba(0, 0, 0, 0.08);
10
+ --coar-shadow-color-strong: rgba(0, 0, 0, 0.12);
11
+
12
+ /* Elevation Levels - classic drop shadows for light mode */
13
+ --coar-shadow-xs: 0 1px 2px var(--coar-shadow-color);
14
+ --coar-shadow-s: 0 2px 4px var(--coar-shadow-color), 0 1px 2px var(--coar-shadow-color);
15
+ --coar-shadow-m: 0 4px 8px var(--coar-shadow-color), 0 2px 4px var(--coar-shadow-color);
16
+ --coar-shadow-l: 0 8px 16px var(--coar-shadow-color), 0 4px 8px var(--coar-shadow-color);
17
+ --coar-shadow-xl: 0 16px 32px var(--coar-shadow-color-strong), 0 8px 16px var(--coar-shadow-color);
18
+
19
+ /* Directional shadows - for sidebars, panels, drawers */
20
+ --coar-shadow-right: 4px 0 8px var(--coar-shadow-color), 2px 0 4px var(--coar-shadow-color);
21
+ }
22
+
23
+ /* Dark mode - use lighter borders/glows since shadows don't work on dark backgrounds */
24
+ .dark-mode {
25
+ /* In dark mode, we combine a subtle dark outer shadow with a light inner glow/edge */
26
+ --coar-shadow-color: rgba(0, 0, 0, 0.5);
27
+ --coar-shadow-color-strong: rgba(0, 0, 0, 0.6);
28
+
29
+ /* Light edge highlight for elevation perception */
30
+ --coar-shadow-xs: 0 1px 2px var(--coar-shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.05);
31
+ --coar-shadow-s: 0 2px 4px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.05);
32
+ --coar-shadow-m: 0 4px 12px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.08);
33
+ --coar-shadow-l: 0 8px 24px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.1);
34
+ --coar-shadow-xl: 0 16px 48px var(--coar-shadow-color-strong), 0 0 0 1px rgba(255, 255, 255, 0.12);
35
+
36
+ /* Directional shadows - for sidebars, panels, drawers */
37
+ --coar-shadow-right: 4px 0 8px rgba(0, 0, 0, 0.3), inset -1px 0 0 0 rgba(255, 255, 255, 0.08);
38
+ }
package/css/spacing.css ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Spacing - Margins, padding, and gaps
4
+ * Based on 4px grid system
5
+ */
6
+
7
+ :root {
8
+ --coar-spacing-xxs: 2px;
9
+ --coar-spacing-xs: 4px;
10
+ --coar-spacing-s: 8px;
11
+ --coar-spacing-m: 16px;
12
+ --coar-spacing-l: 24px;
13
+ --coar-spacing-xl: 32px;
14
+ --coar-spacing-xxl: 48px;
15
+ --coar-spacing-xxxl: 64px;
16
+ }
package/css/stroke-width.css ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Stroke Width - Border widths
4
+ * Auto-generated from Figma - Do not edit manually
5
+ */
6
+
7
+ :root {
8
+ --coar-stroke-width-l: 4px;
9
+ --coar-stroke-width-m: 2px;
10
+ --coar-stroke-width-s: 1px;
11
+ --coar-stroke-width-xs: 0.5px;
12
+ }
package/css/type-primitives.css ADDED
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Type Primitives - Font families and base sizes
4
+ * Auto-generated from Figma - Do not edit manually
5
+ */
6
+
7
+ :root {
8
+ --coar-font-family-body: Poppins;
9
+ --coar-font-family-title: Inter;
10
+ --coar-font-size-l: 24px;
11
+ --coar-font-size-m: 20px;
12
+ --coar-font-size-s: 16px;
13
+ --coar-font-size-xl: 32px;
14
+ --coar-font-size-xs: 14px;
15
+ --coar-font-size-xxl: 48px;
16
+ --coar-font-size-xxs: 12px;
17
+ --coar-font-size-xxxl: 72px;
18
+ --coar-font-size-xxxs: 10px;
19
+ --coar-font-weight-bold: 700;
20
+ --coar-font-weight-medium: 500;
21
+ --coar-font-weight-regular: 400;
22
+ --coar-font-weight-semi-bold: 600;
23
+ }
package/css/typography-responsive.css ADDED
@@ -0,0 +1,44 @@
1
+ /**
2
+ * Cocoar Design System - Responsive Typography Extensions
3
+ *
4
+ * This file extends the base typography tokens with responsive variants.
5
+ * These are NOT auto-generated from Figma - they can be edited manually.
6
+ *
7
+ * The base tokens (--coar-titles-display-size, etc.) come from Figma.
8
+ * These responsive variants scale typography for different screen sizes.
9
+ */
10
+
11
+ :root {
12
+ /* ========================================
13
+ RESPONSIVE TYPOGRAPHY TOKENS
14
+ ========================================
15
+
16
+ Naming convention:
17
+ --coar-{category}-{style}-size-{breakpoint}
18
+
19
+ Breakpoints:
20
+ - (default): Desktop 1024px+
21
+ - tablet: 768px - 1023px
22
+ - mobile: < 768px
23
+ ======================================== */
24
+
25
+ /* Display - 72px → 48px → 36px */
26
+ --coar-titles-display-size-tablet: 48px;
27
+ --coar-titles-display-size-mobile: 36px;
28
+
29
+ /* Title - 48px → 36px → 28px */
30
+ --coar-titles-title-size-tablet: 36px;
31
+ --coar-titles-title-size-mobile: 28px;
32
+
33
+ /* Subtitle - 32px → 24px → 20px */
34
+ --coar-titles-subtitle-size-tablet: 24px;
35
+ --coar-titles-subtitle-size-mobile: 20px;
36
+
37
+ /* Heading - 24px → 20px → 18px */
38
+ --coar-headings-heading-size-tablet: 20px;
39
+ --coar-headings-heading-size-mobile: 18px;
40
+
41
+ /* Subheading - 20px → 18px → 16px */
42
+ --coar-headings-subheading-size-tablet: 18px;
43
+ --coar-headings-subheading-size-mobile: 16px;
44
+ }
package/css/typography.css ADDED
@@ -0,0 +1,41 @@
1
+ /**
2
+ * Cocoar Design System - Design Tokens
3
+ * Typography - Font styles and sizes
4
+ * Auto-generated from Figma - Do not edit manually
5
+ */
6
+
7
+ :root {
8
+ --coar-body-base-family: Poppins;
9
+ --coar-body-base-size: 16px;
10
+ --coar-body-base-weight: 400;
11
+ --coar-body-bold-family: Poppins;
12
+ --coar-body-bold-size: 16px;
13
+ --coar-body-bold-weight: 700;
14
+ --coar-body-caption-family: Poppins;
15
+ --coar-body-caption-size: 12px;
16
+ --coar-body-caption-weight: 500;
17
+ --coar-body-footnote-family: Poppins;
18
+ --coar-body-footnote-size: 10px;
19
+ --coar-body-footnote-weight: 400;
20
+ --coar-body-small-base-family: Poppins;
21
+ --coar-body-small-base-size: 14px;
22
+ --coar-body-small-base-weight: 400;
23
+ --coar-body-small-bold-family: Poppins;
24
+ --coar-body-small-bold-size: 14px;
25
+ --coar-body-small-bold-weight: 700;
26
+ --coar-headings-heading-family: Poppins;
27
+ --coar-headings-heading-size: 24px;
28
+ --coar-headings-heading-weight: 600;
29
+ --coar-headings-subheading-family: Poppins;
30
+ --coar-headings-subheading-size: 20px;
31
+ --coar-headings-subheading-weight: 400;
32
+ --coar-titles-display-family: Inter;
33
+ --coar-titles-display-size: 72px;
34
+ --coar-titles-display-weight: 700;
35
+ --coar-titles-subtitle-family: Inter;
36
+ --coar-titles-subtitle-size: 32px;
37
+ --coar-titles-subtitle-weight: 400;
38
+ --coar-titles-title-family: Inter;
39
+ --coar-titles-title-size: 48px;
40
+ --coar-titles-title-weight: 700;
41
+ }
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@cocoar/ui-tokens",
3
+ "version": "0.1.0-beta.100",
4
+ "description": "CSS variables (design tokens) for the Cocoar Design System",
5
+ "author": "Cocoar",
6
+ "license": "Apache-2.0",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/cocoar-dev/cocoar-ui.git",
10
+ "directory": "libs/ui-tokens"
11
+ },
12
+ "bugs": {
13
+ "url": "https://github.com/cocoar-dev/cocoar-ui/issues"
14
+ },
15
+ "homepage": "https://github.com/cocoar-dev/cocoar-ui",
16
+ "keywords": [
17
+ "design-tokens",
18
+ "design-system",
19
+ "css-variables",
20
+ "cocoar"
21
+ ],
22
+ "type": "commonjs",
23
+ "main": "./src/index.js",
24
+ "types": "./src/index.d.ts",
25
+ "exports": {
26
+ ".": {
27
+ "types": "./src/index.d.ts",
28
+ "default": "./src/index.js"
29
+ },
30
+ "./css/*": "./css/*"
31
+ },
32
+ "publishConfig": {
33
+ "access": "public"
34
+ },
35
+ "dependencies": {
36
+ "tslib": "^2.3.0"
37
+ }
38
+ }
package/src/index.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @cocoar/ui-tokens
3
+ *
4
+ * Shared CSS variables for the Cocoar Design System.
5
+ *
6
+ * ## Usage
7
+ *
8
+ * ### Import CSS Variables
9
+ * ```css
10
+ * @import '@cocoar/ui-tokens/css/all.css';
11
+ * ```
12
+ *
13
+ * ### Use in Components
14
+ * ```css
15
+ * .button {
16
+ * background: var(--coar-background-brand-primary);
17
+ * color: var(--coar-text-on-bold);
18
+ * border-radius: var(--coar-radius-m);
19
+ * }
20
+ * ```
21
+ */
package/src/index.js ADDED
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ /**
3
+ * @cocoar/ui-tokens
4
+ *
5
+ * Shared CSS variables for the Cocoar Design System.
6
+ *
7
+ * ## Usage
8
+ *
9
+ * ### Import CSS Variables
10
+ * ```css
11
+ * @import '@cocoar/ui-tokens/css/all.css';
12
+ * ```
13
+ *
14
+ * ### Use in Components
15
+ * ```css
16
+ * .button {
17
+ * background: var(--coar-background-brand-primary);
18
+ * color: var(--coar-text-on-bold);
19
+ * border-radius: var(--coar-radius-m);
20
+ * }
21
+ * ```
22
+ */
23
+ // This package exports CSS files only - no TypeScript exports
24
+ // Import the CSS directly: @import '@cocoar/ui-tokens/css/all.css';
25
+ //# sourceMappingURL=index.js.map
package/src/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/ui-tokens/src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,8DAA8D;AAC9D,oEAAoE"}