@sekiui/elements 0.0.38 → 0.0.39

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 (15) hide show
  1. package/dist/collection/styles/tokens/typography-tokens.js +8 -0
  2. package/dist/collection/styles/tokens/typography-tokens.ts +9 -0
  3. package/dist/collection/styles/typography/base.css +137 -0
  4. package/dist/collection/styles/typography/index.css +9 -0
  5. package/dist/collection/styles/typography/prose.css +132 -0
  6. package/dist/collection/styles/typography/tokens.css +77 -0
  7. package/dist/collection/styles/typography/variants.css +25 -0
  8. package/dist/sekiui/styles/tokens/typography-tokens.ts +9 -0
  9. package/dist/sekiui/styles/typography/base.css +137 -0
  10. package/dist/sekiui/styles/typography/index.css +9 -0
  11. package/dist/sekiui/styles/typography/prose.css +132 -0
  12. package/dist/sekiui/styles/typography/tokens.css +77 -0
  13. package/dist/sekiui/styles/typography/variants.css +25 -0
  14. package/dist/types/styles/tokens/typography-tokens.d.ts +6 -0
  15. package/package.json +1 -2
package/dist/collection/styles/tokens/typography-tokens.js ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Typography Design Tokens
3
+ * TypeScript exports for programmatic token access
4
+ * Reference: specs/012-time-to-do/research.md Section 7
5
+ */
6
+ export const typographyTokens = {
7
+ // Token definitions will be added in T028
8
+ };
package/dist/collection/styles/tokens/typography-tokens.ts ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Typography Design Tokens
3
+ * TypeScript exports for programmatic token access
4
+ * Reference: specs/012-time-to-do/research.md Section 7
5
+ */
6
+
7
+ export const typographyTokens = {
8
+ // Token definitions will be added in T028
9
+ };
package/dist/collection/styles/typography/base.css ADDED
@@ -0,0 +1,137 @@
1
+ /* Typography Base Classes
2
+ * Heading classes (h1-h4), paragraph, blockquote, list, table, code
3
+ * Reference: specs/012-time-to-do/data-model.md
4
+ */
5
+
6
+ /* Heading Classes */
7
+ .seki-h1 {
8
+ scroll-margin-top: 5rem;
9
+ font-size: clamp(var(--seki-typography-h1-size-min), 5vw, var(--seki-typography-h1-size-max));
10
+ font-weight: var(--seki-typography-h1-weight);
11
+ font-family: var(--seki-typography-heading-font);
12
+ letter-spacing: var(--seki-typography-heading-spacing);
13
+ color: var(--seki-color-text);
14
+ text-wrap: balance;
15
+ }
16
+
17
+ .seki-h2 {
18
+ margin-top: 2.5rem;
19
+ scroll-margin-top: 5rem;
20
+ border-bottom: 1px solid var(--seki-color-border);
21
+ padding-bottom: 0.5rem;
22
+ font-size: clamp(var(--seki-typography-h2-size-min), 4vw, var(--seki-typography-h2-size-max));
23
+ font-weight: var(--seki-typography-h2-weight);
24
+ font-family: var(--seki-typography-heading-font);
25
+ letter-spacing: var(--seki-typography-heading-spacing);
26
+ color: var(--seki-color-text);
27
+ transition: color 200ms;
28
+ }
29
+
30
+ .seki-h2:first-child {
31
+ margin-top: 0;
32
+ }
33
+
34
+ .seki-h3 {
35
+ margin-top: 2rem;
36
+ scroll-margin-top: 5rem;
37
+ font-size: clamp(var(--seki-typography-h3-size-min), 3.5vw, var(--seki-typography-h3-size-max));
38
+ font-weight: var(--seki-typography-h3-weight);
39
+ font-family: var(--seki-typography-heading-font);
40
+ letter-spacing: var(--seki-typography-heading-spacing);
41
+ color: var(--seki-color-text);
42
+ }
43
+
44
+ .seki-h4 {
45
+ margin-top: 1.5rem;
46
+ scroll-margin-top: 5rem;
47
+ font-size: clamp(var(--seki-typography-h4-size-min), 3vw, var(--seki-typography-h4-size-max));
48
+ font-weight: var(--seki-typography-h4-weight);
49
+ font-family: var(--seki-typography-heading-font);
50
+ letter-spacing: var(--seki-typography-heading-spacing);
51
+ color: var(--seki-color-text);
52
+ }
53
+
54
+ /* Paragraph Classes */
55
+ .seki-p {
56
+ font-family: var(--seki-typography-body-font);
57
+ font-size: var(--seki-font-size-base);
58
+ font-weight: var(--seki-font-weight-normal);
59
+ line-height: var(--seki-typography-body-line-height);
60
+ color: var(--seki-color-text);
61
+ }
62
+
63
+ .seki-p:not(:first-child) {
64
+ margin-top: 1.5rem;
65
+ }
66
+
67
+ .seki-lead {
68
+ font-family: var(--seki-typography-body-font);
69
+ font-size: clamp(var(--seki-font-size-lg), 3vw, var(--seki-font-size-xl));
70
+ color: var(--seki-color-text-muted);
71
+ line-height: var(--seki-typography-body-line-height);
72
+ }
73
+
74
+ /* Blockquote Class */
75
+ .seki-blockquote {
76
+ margin-top: 1.5rem;
77
+ border-left: 2px solid var(--seki-color-border);
78
+ padding-left: 1.5rem;
79
+ font-style: italic;
80
+ color: var(--seki-color-text-muted);
81
+ font-family: var(--seki-typography-body-font);
82
+ }
83
+
84
+ /* List Class */
85
+ .seki-list {
86
+ margin: 1.5rem 0;
87
+ padding-left: 1.5rem;
88
+ font-family: var(--seki-typography-body-font);
89
+ color: var(--seki-color-text);
90
+ }
91
+
92
+ .seki-list > li {
93
+ margin-top: 0.5rem;
94
+ line-height: var(--seki-typography-body-line-height);
95
+ }
96
+
97
+ .seki-list > li::marker {
98
+ color: var(--seki-color-text-muted);
99
+ }
100
+
101
+ /* Table Class */
102
+ .seki-table {
103
+ width: 100%;
104
+ caption-side: bottom;
105
+ border-collapse: collapse;
106
+ margin: 1.5rem 0;
107
+ font-family: var(--seki-typography-body-font);
108
+ color: var(--seki-color-text);
109
+ }
110
+
111
+ .seki-table th {
112
+ border-bottom: 1px solid var(--seki-color-border);
113
+ padding: 0.75rem;
114
+ text-align: left;
115
+ font-weight: var(--seki-font-weight-semibold);
116
+ }
117
+
118
+ .seki-table td {
119
+ border-bottom: 1px solid var(--seki-color-border-subtle);
120
+ padding: 0.75rem;
121
+ text-align: left;
122
+ }
123
+
124
+ .seki-table tr:last-child td {
125
+ border-bottom: none;
126
+ }
127
+
128
+ /* Inline Code Class */
129
+ .seki-inline-code {
130
+ position: relative;
131
+ border-radius: 0.25rem;
132
+ background-color: var(--seki-color-muted);
133
+ padding: 0.125rem 0.375rem;
134
+ font-family: var(--seki-typography-code-font);
135
+ font-size: 0.875em; /* 87.5% of parent - inherits parent size then scales */
136
+ font-weight: var(--seki-font-weight-medium);
137
+ }
package/dist/collection/styles/typography/index.css ADDED
@@ -0,0 +1,9 @@
1
+ /* Typography System - Main Entry Point
2
+ * Import this file to get all typography styles
3
+ * Or import individual files for selective loading
4
+ */
5
+
6
+ @import './tokens.css';
7
+ @import './base.css';
8
+ @import './variants.css';
9
+ @import './prose.css';
package/dist/collection/styles/typography/prose.css ADDED
@@ -0,0 +1,132 @@
1
+ /* Prose Wrapper
2
+ * Automatic typography styling for content areas
3
+ * Reference: specs/012-time-to-do/research.md Section 3
4
+ */
5
+
6
+ .seki-prose {
7
+ max-width: 65ch;
8
+ color: var(--seki-color-text);
9
+ }
10
+
11
+ /* Use :where() for low specificity - allows easy overrides */
12
+ .seki-prose :where(h1) {
13
+ scroll-margin-top: 5rem;
14
+ font-size: clamp(var(--seki-typography-h1-size-min), 5vw, var(--seki-typography-h1-size-max));
15
+ font-weight: var(--seki-typography-h1-weight);
16
+ font-family: var(--seki-typography-heading-font);
17
+ letter-spacing: var(--seki-typography-heading-spacing);
18
+ text-wrap: balance;
19
+ }
20
+
21
+ .seki-prose :where(h2) {
22
+ margin-top: 2.5rem;
23
+ scroll-margin-top: 5rem;
24
+ border-bottom: 1px solid var(--seki-color-border);
25
+ padding-bottom: 0.5rem;
26
+ font-size: clamp(var(--seki-typography-h2-size-min), 4vw, var(--seki-typography-h2-size-max));
27
+ font-weight: var(--seki-typography-h2-weight);
28
+ font-family: var(--seki-typography-heading-font);
29
+ letter-spacing: var(--seki-typography-heading-spacing);
30
+ }
31
+
32
+ .seki-prose :where(h2:first-child) {
33
+ margin-top: 0;
34
+ }
35
+
36
+ .seki-prose :where(h3) {
37
+ margin-top: 2rem;
38
+ scroll-margin-top: 5rem;
39
+ font-size: clamp(var(--seki-typography-h3-size-min), 3.5vw, var(--seki-typography-h3-size-max));
40
+ font-weight: var(--seki-typography-h3-weight);
41
+ font-family: var(--seki-typography-heading-font);
42
+ letter-spacing: var(--seki-typography-heading-spacing);
43
+ }
44
+
45
+ .seki-prose :where(h4) {
46
+ margin-top: 1.5rem;
47
+ scroll-margin-top: 5rem;
48
+ font-size: clamp(var(--seki-typography-h4-size-min), 3vw, var(--seki-typography-h4-size-max));
49
+ font-weight: var(--seki-typography-h4-weight);
50
+ font-family: var(--seki-typography-heading-font);
51
+ letter-spacing: var(--seki-typography-heading-spacing);
52
+ }
53
+
54
+ .seki-prose :where(p) {
55
+ font-family: var(--seki-typography-body-font);
56
+ font-size: var(--seki-font-size-base);
57
+ font-weight: var(--seki-font-weight-normal);
58
+ line-height: var(--seki-typography-body-line-height);
59
+ }
60
+
61
+ .seki-prose :where(p:not(:first-child)) {
62
+ margin-top: 1.5rem;
63
+ }
64
+
65
+ .seki-prose :where(blockquote) {
66
+ margin-top: 1.5rem;
67
+ border-left: 2px solid var(--seki-color-border);
68
+ padding-left: 1.5rem;
69
+ font-style: italic;
70
+ color: var(--seki-color-text-muted);
71
+ font-family: var(--seki-typography-body-font);
72
+ }
73
+
74
+ .seki-prose :where(ul, ol) {
75
+ margin: 1.5rem 0;
76
+ padding-left: 1.5rem;
77
+ font-family: var(--seki-typography-body-font);
78
+ }
79
+
80
+ .seki-prose :where(li) {
81
+ margin-top: 0.5rem;
82
+ line-height: var(--seki-typography-body-line-height);
83
+ }
84
+
85
+ .seki-prose :where(li::marker) {
86
+ color: var(--seki-color-text-muted);
87
+ }
88
+
89
+ .seki-prose :where(code) {
90
+ position: relative;
91
+ border-radius: 0.25rem;
92
+ background-color: var(--seki-color-muted);
93
+ padding: 0.125rem 0.375rem;
94
+ font-family: var(--seki-typography-code-font);
95
+ font-size: 0.875em;
96
+ font-weight: var(--seki-font-weight-medium);
97
+ }
98
+
99
+ .seki-prose :where(table) {
100
+ width: 100%;
101
+ caption-side: bottom;
102
+ border-collapse: collapse;
103
+ margin: 1.5rem 0;
104
+ font-family: var(--seki-typography-body-font);
105
+ }
106
+
107
+ .seki-prose :where(th) {
108
+ border-bottom: 1px solid var(--seki-color-border);
109
+ padding: 0.75rem;
110
+ text-align: left;
111
+ font-weight: var(--seki-font-weight-semibold);
112
+ }
113
+
114
+ .seki-prose :where(td) {
115
+ border-bottom: 1px solid var(--seki-color-border-subtle);
116
+ padding: 0.75rem;
117
+ text-align: left;
118
+ }
119
+
120
+ .seki-prose :where(tr:last-child td) {
121
+ border-bottom: none;
122
+ }
123
+
124
+ /* Flow spacing - space between sibling elements */
125
+ .seki-prose > * + * {
126
+ margin-top: 1.5rem;
127
+ }
128
+
129
+ /* Reduced spacing after headings */
130
+ .seki-prose > :is(h2, h3, h4) + * {
131
+ margin-top: 1rem;
132
+ }
package/dist/collection/styles/typography/tokens.css ADDED
@@ -0,0 +1,77 @@
1
+ /* Typography Design Tokens
2
+ * This file defines all CSS custom properties for the typography system
3
+ * Reference: specs/012-time-to-do/data-model.md
4
+ */
5
+
6
+ :root {
7
+ /* Font Family Tokens */
8
+ --seki-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
9
+ --seki-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
10
+
11
+ /* Font Size Tokens (Primitive Scale) */
12
+ --seki-font-size-xs: 0.75rem; /* 12px */
13
+ --seki-font-size-sm: 0.875rem; /* 14px */
14
+ --seki-font-size-base: 1rem; /* 16px */
15
+ --seki-font-size-lg: 1.125rem; /* 18px */
16
+ --seki-font-size-xl: 1.25rem; /* 20px */
17
+ --seki-font-size-2xl: 1.5rem; /* 24px */
18
+ --seki-font-size-3xl: 1.875rem; /* 30px */
19
+ --seki-font-size-4xl: 2.4rem; /* 38.4px */
20
+
21
+ /* Font Weight Tokens */
22
+ --seki-font-weight-normal: 400;
23
+ --seki-font-weight-medium: 500;
24
+ --seki-font-weight-semibold: 600;
25
+ --seki-font-weight-bold: 700;
26
+ --seki-font-weight-extrabold: 800;
27
+
28
+ /* Line Height Tokens */
29
+ --seki-line-height-tight: 1.25;
30
+ --seki-line-height-normal: 1.5;
31
+ --seki-line-height-relaxed: 1.75;
32
+
33
+ /* Letter Spacing Tokens */
34
+ --seki-letter-spacing-tight: -0.025em;
35
+ --seki-letter-spacing-normal: 0;
36
+ --seki-letter-spacing-wide: 0.025em;
37
+
38
+ /* Color Tokens - Light Mode */
39
+ --seki-color-text: hsl(0, 0%, 10%); /* #1a1a1a - 16.5:1 contrast on white */
40
+ --seki-color-text-muted: hsl(0, 0%, 45%); /* #737373 - 4.7:1 contrast (WCAG AA) */
41
+ --seki-color-border: hsl(0, 0%, 88%); /* #e0e0e0 */
42
+ --seki-color-border-subtle: hsl(0, 0%, 93%); /* #ededed */
43
+ --seki-color-muted: hsl(0, 0%, 96%); /* #f5f5f5 - for code backgrounds */
44
+
45
+ /* Component-Specific Tokens - Heading Sizes */
46
+ --seki-typography-h1-size-min: 2rem;
47
+ --seki-typography-h1-size-max: 2.4rem;
48
+ --seki-typography-h1-weight: var(--seki-font-weight-extrabold);
49
+
50
+ --seki-typography-h2-size-min: 1.5rem;
51
+ --seki-typography-h2-size-max: 1.875rem;
52
+ --seki-typography-h2-weight: var(--seki-font-weight-semibold);
53
+
54
+ --seki-typography-h3-size-min: 1.25rem;
55
+ --seki-typography-h3-size-max: 1.5rem;
56
+ --seki-typography-h3-weight: var(--seki-font-weight-semibold);
57
+
58
+ --seki-typography-h4-size-min: 1.125rem;
59
+ --seki-typography-h4-size-max: 1.25rem;
60
+ --seki-typography-h4-weight: var(--seki-font-weight-semibold);
61
+
62
+ /* Semantic Grouping Tokens */
63
+ --seki-typography-heading-font: var(--seki-font-sans);
64
+ --seki-typography-heading-spacing: var(--seki-letter-spacing-tight);
65
+ --seki-typography-body-font: var(--seki-font-sans);
66
+ --seki-typography-body-line-height: var(--seki-line-height-relaxed);
67
+ --seki-typography-code-font: var(--seki-font-mono);
68
+ }
69
+
70
+ /* Dark Mode Color Tokens (matching shadcn/ui) */
71
+ [data-theme="dark"] {
72
+ --seki-color-text: hsl(0, 0%, 98%); /* shadcn --foreground: oklch(0.985 0 0) ≈ 98.5% */
73
+ --seki-color-text-muted: hsl(0, 0%, 65%); /* shadcn --muted-foreground: oklch(0.708 0 0) ≈ 64.5% */
74
+ --seki-color-border: hsl(0, 0%, 27%); /* shadcn --border: oklch(0.269 0 0) */
75
+ --seki-color-border-subtle: hsl(0, 0%, 20%);/* slightly darker variant */
76
+ --seki-color-muted: hsl(0, 0%, 20%); /* shadcn --muted: oklch(0.269 0 0) */
77
+ }
package/dist/collection/styles/typography/variants.css ADDED
@@ -0,0 +1,25 @@
1
+ /* Typography Variants
2
+ * Text emphasis classes: lead, large, small, muted
3
+ * Reference: specs/012-time-to-do/data-model.md
4
+ */
5
+
6
+ .seki-large {
7
+ font-size: clamp(var(--seki-font-size-lg), 3vw, var(--seki-font-size-xl));
8
+ font-weight: var(--seki-font-weight-semibold);
9
+ font-family: var(--seki-font-sans);
10
+ color: var(--seki-color-text);
11
+ }
12
+
13
+ .seki-small {
14
+ font-size: var(--seki-font-size-sm);
15
+ font-weight: var(--seki-font-weight-medium);
16
+ line-height: 1.25rem;
17
+ font-family: var(--seki-font-sans);
18
+ color: var(--seki-color-text);
19
+ }
20
+
21
+ .seki-muted {
22
+ font-size: var(--seki-font-size-sm);
23
+ color: var(--seki-color-text-muted);
24
+ font-family: var(--seki-font-sans);
25
+ }
package/dist/sekiui/styles/tokens/typography-tokens.ts ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Typography Design Tokens
3
+ * TypeScript exports for programmatic token access
4
+ * Reference: specs/012-time-to-do/research.md Section 7
5
+ */
6
+
7
+ export const typographyTokens = {
8
+ // Token definitions will be added in T028
9
+ };
package/dist/sekiui/styles/typography/base.css ADDED
@@ -0,0 +1,137 @@
1
+ /* Typography Base Classes
2
+ * Heading classes (h1-h4), paragraph, blockquote, list, table, code
3
+ * Reference: specs/012-time-to-do/data-model.md
4
+ */
5
+
6
+ /* Heading Classes */
7
+ .seki-h1 {
8
+ scroll-margin-top: 5rem;
9
+ font-size: clamp(var(--seki-typography-h1-size-min), 5vw, var(--seki-typography-h1-size-max));
10
+ font-weight: var(--seki-typography-h1-weight);
11
+ font-family: var(--seki-typography-heading-font);
12
+ letter-spacing: var(--seki-typography-heading-spacing);
13
+ color: var(--seki-color-text);
14
+ text-wrap: balance;
15
+ }
16
+
17
+ .seki-h2 {
18
+ margin-top: 2.5rem;
19
+ scroll-margin-top: 5rem;
20
+ border-bottom: 1px solid var(--seki-color-border);
21
+ padding-bottom: 0.5rem;
22
+ font-size: clamp(var(--seki-typography-h2-size-min), 4vw, var(--seki-typography-h2-size-max));
23
+ font-weight: var(--seki-typography-h2-weight);
24
+ font-family: var(--seki-typography-heading-font);
25
+ letter-spacing: var(--seki-typography-heading-spacing);
26
+ color: var(--seki-color-text);
27
+ transition: color 200ms;
28
+ }
29
+
30
+ .seki-h2:first-child {
31
+ margin-top: 0;
32
+ }
33
+
34
+ .seki-h3 {
35
+ margin-top: 2rem;
36
+ scroll-margin-top: 5rem;
37
+ font-size: clamp(var(--seki-typography-h3-size-min), 3.5vw, var(--seki-typography-h3-size-max));
38
+ font-weight: var(--seki-typography-h3-weight);
39
+ font-family: var(--seki-typography-heading-font);
40
+ letter-spacing: var(--seki-typography-heading-spacing);
41
+ color: var(--seki-color-text);
42
+ }
43
+
44
+ .seki-h4 {
45
+ margin-top: 1.5rem;
46
+ scroll-margin-top: 5rem;
47
+ font-size: clamp(var(--seki-typography-h4-size-min), 3vw, var(--seki-typography-h4-size-max));
48
+ font-weight: var(--seki-typography-h4-weight);
49
+ font-family: var(--seki-typography-heading-font);
50
+ letter-spacing: var(--seki-typography-heading-spacing);
51
+ color: var(--seki-color-text);
52
+ }
53
+
54
+ /* Paragraph Classes */
55
+ .seki-p {
56
+ font-family: var(--seki-typography-body-font);
57
+ font-size: var(--seki-font-size-base);
58
+ font-weight: var(--seki-font-weight-normal);
59
+ line-height: var(--seki-typography-body-line-height);
60
+ color: var(--seki-color-text);
61
+ }
62
+
63
+ .seki-p:not(:first-child) {
64
+ margin-top: 1.5rem;
65
+ }
66
+
67
+ .seki-lead {
68
+ font-family: var(--seki-typography-body-font);
69
+ font-size: clamp(var(--seki-font-size-lg), 3vw, var(--seki-font-size-xl));
70
+ color: var(--seki-color-text-muted);
71
+ line-height: var(--seki-typography-body-line-height);
72
+ }
73
+
74
+ /* Blockquote Class */
75
+ .seki-blockquote {
76
+ margin-top: 1.5rem;
77
+ border-left: 2px solid var(--seki-color-border);
78
+ padding-left: 1.5rem;
79
+ font-style: italic;
80
+ color: var(--seki-color-text-muted);
81
+ font-family: var(--seki-typography-body-font);
82
+ }
83
+
84
+ /* List Class */
85
+ .seki-list {
86
+ margin: 1.5rem 0;
87
+ padding-left: 1.5rem;
88
+ font-family: var(--seki-typography-body-font);
89
+ color: var(--seki-color-text);
90
+ }
91
+
92
+ .seki-list > li {
93
+ margin-top: 0.5rem;
94
+ line-height: var(--seki-typography-body-line-height);
95
+ }
96
+
97
+ .seki-list > li::marker {
98
+ color: var(--seki-color-text-muted);
99
+ }
100
+
101
+ /* Table Class */
102
+ .seki-table {
103
+ width: 100%;
104
+ caption-side: bottom;
105
+ border-collapse: collapse;
106
+ margin: 1.5rem 0;
107
+ font-family: var(--seki-typography-body-font);
108
+ color: var(--seki-color-text);
109
+ }
110
+
111
+ .seki-table th {
112
+ border-bottom: 1px solid var(--seki-color-border);
113
+ padding: 0.75rem;
114
+ text-align: left;
115
+ font-weight: var(--seki-font-weight-semibold);
116
+ }
117
+
118
+ .seki-table td {
119
+ border-bottom: 1px solid var(--seki-color-border-subtle);
120
+ padding: 0.75rem;
121
+ text-align: left;
122
+ }
123
+
124
+ .seki-table tr:last-child td {
125
+ border-bottom: none;
126
+ }
127
+
128
+ /* Inline Code Class */
129
+ .seki-inline-code {
130
+ position: relative;
131
+ border-radius: 0.25rem;
132
+ background-color: var(--seki-color-muted);
133
+ padding: 0.125rem 0.375rem;
134
+ font-family: var(--seki-typography-code-font);
135
+ font-size: 0.875em; /* 87.5% of parent - inherits parent size then scales */
136
+ font-weight: var(--seki-font-weight-medium);
137
+ }
package/dist/sekiui/styles/typography/index.css ADDED
@@ -0,0 +1,9 @@
1
+ /* Typography System - Main Entry Point
2
+ * Import this file to get all typography styles
3
+ * Or import individual files for selective loading
4
+ */
5
+
6
+ @import './tokens.css';
7
+ @import './base.css';
8
+ @import './variants.css';
9
+ @import './prose.css';
package/dist/sekiui/styles/typography/prose.css ADDED
@@ -0,0 +1,132 @@
1
+ /* Prose Wrapper
2
+ * Automatic typography styling for content areas
3
+ * Reference: specs/012-time-to-do/research.md Section 3
4
+ */
5
+
6
+ .seki-prose {
7
+ max-width: 65ch;
8
+ color: var(--seki-color-text);
9
+ }
10
+
11
+ /* Use :where() for low specificity - allows easy overrides */
12
+ .seki-prose :where(h1) {
13
+ scroll-margin-top: 5rem;
14
+ font-size: clamp(var(--seki-typography-h1-size-min), 5vw, var(--seki-typography-h1-size-max));
15
+ font-weight: var(--seki-typography-h1-weight);
16
+ font-family: var(--seki-typography-heading-font);
17
+ letter-spacing: var(--seki-typography-heading-spacing);
18
+ text-wrap: balance;
19
+ }
20
+
21
+ .seki-prose :where(h2) {
22
+ margin-top: 2.5rem;
23
+ scroll-margin-top: 5rem;
24
+ border-bottom: 1px solid var(--seki-color-border);
25
+ padding-bottom: 0.5rem;
26
+ font-size: clamp(var(--seki-typography-h2-size-min), 4vw, var(--seki-typography-h2-size-max));
27
+ font-weight: var(--seki-typography-h2-weight);
28
+ font-family: var(--seki-typography-heading-font);
29
+ letter-spacing: var(--seki-typography-heading-spacing);
30
+ }
31
+
32
+ .seki-prose :where(h2:first-child) {
33
+ margin-top: 0;
34
+ }
35
+
36
+ .seki-prose :where(h3) {
37
+ margin-top: 2rem;
38
+ scroll-margin-top: 5rem;
39
+ font-size: clamp(var(--seki-typography-h3-size-min), 3.5vw, var(--seki-typography-h3-size-max));
40
+ font-weight: var(--seki-typography-h3-weight);
41
+ font-family: var(--seki-typography-heading-font);
42
+ letter-spacing: var(--seki-typography-heading-spacing);
43
+ }
44
+
45
+ .seki-prose :where(h4) {
46
+ margin-top: 1.5rem;
47
+ scroll-margin-top: 5rem;
48
+ font-size: clamp(var(--seki-typography-h4-size-min), 3vw, var(--seki-typography-h4-size-max));
49
+ font-weight: var(--seki-typography-h4-weight);
50
+ font-family: var(--seki-typography-heading-font);
51
+ letter-spacing: var(--seki-typography-heading-spacing);
52
+ }
53
+
54
+ .seki-prose :where(p) {
55
+ font-family: var(--seki-typography-body-font);
56
+ font-size: var(--seki-font-size-base);
57
+ font-weight: var(--seki-font-weight-normal);
58
+ line-height: var(--seki-typography-body-line-height);
59
+ }
60
+
61
+ .seki-prose :where(p:not(:first-child)) {
62
+ margin-top: 1.5rem;
63
+ }
64
+
65
+ .seki-prose :where(blockquote) {
66
+ margin-top: 1.5rem;
67
+ border-left: 2px solid var(--seki-color-border);
68
+ padding-left: 1.5rem;
69
+ font-style: italic;
70
+ color: var(--seki-color-text-muted);
71
+ font-family: var(--seki-typography-body-font);
72
+ }
73
+
74
+ .seki-prose :where(ul, ol) {
75
+ margin: 1.5rem 0;
76
+ padding-left: 1.5rem;
77
+ font-family: var(--seki-typography-body-font);
78
+ }
79
+
80
+ .seki-prose :where(li) {
81
+ margin-top: 0.5rem;
82
+ line-height: var(--seki-typography-body-line-height);
83
+ }
84
+
85
+ .seki-prose :where(li::marker) {
86
+ color: var(--seki-color-text-muted);
87
+ }
88
+
89
+ .seki-prose :where(code) {
90
+ position: relative;
91
+ border-radius: 0.25rem;
92
+ background-color: var(--seki-color-muted);
93
+ padding: 0.125rem 0.375rem;
94
+ font-family: var(--seki-typography-code-font);
95
+ font-size: 0.875em;
96
+ font-weight: var(--seki-font-weight-medium);
97
+ }
98
+
99
+ .seki-prose :where(table) {
100
+ width: 100%;
101
+ caption-side: bottom;
102
+ border-collapse: collapse;
103
+ margin: 1.5rem 0;
104
+ font-family: var(--seki-typography-body-font);
105
+ }
106
+
107
+ .seki-prose :where(th) {
108
+ border-bottom: 1px solid var(--seki-color-border);
109
+ padding: 0.75rem;
110
+ text-align: left;
111
+ font-weight: var(--seki-font-weight-semibold);
112
+ }
113
+
114
+ .seki-prose :where(td) {
115
+ border-bottom: 1px solid var(--seki-color-border-subtle);
116
+ padding: 0.75rem;
117
+ text-align: left;
118
+ }
119
+
120
+ .seki-prose :where(tr:last-child td) {
121
+ border-bottom: none;
122
+ }
123
+
124
+ /* Flow spacing - space between sibling elements */
125
+ .seki-prose > * + * {
126
+ margin-top: 1.5rem;
127
+ }
128
+
129
+ /* Reduced spacing after headings */
130
+ .seki-prose > :is(h2, h3, h4) + * {
131
+ margin-top: 1rem;
132
+ }
package/dist/sekiui/styles/typography/tokens.css ADDED
@@ -0,0 +1,77 @@
1
+ /* Typography Design Tokens
2
+ * This file defines all CSS custom properties for the typography system
3
+ * Reference: specs/012-time-to-do/data-model.md
4
+ */
5
+
6
+ :root {
7
+ /* Font Family Tokens */
8
+ --seki-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
9
+ --seki-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
10
+
11
+ /* Font Size Tokens (Primitive Scale) */
12
+ --seki-font-size-xs: 0.75rem; /* 12px */
13
+ --seki-font-size-sm: 0.875rem; /* 14px */
14
+ --seki-font-size-base: 1rem; /* 16px */
15
+ --seki-font-size-lg: 1.125rem; /* 18px */
16
+ --seki-font-size-xl: 1.25rem; /* 20px */
17
+ --seki-font-size-2xl: 1.5rem; /* 24px */
18
+ --seki-font-size-3xl: 1.875rem; /* 30px */
19
+ --seki-font-size-4xl: 2.4rem; /* 38.4px */
20
+
21
+ /* Font Weight Tokens */
22
+ --seki-font-weight-normal: 400;
23
+ --seki-font-weight-medium: 500;
24
+ --seki-font-weight-semibold: 600;
25
+ --seki-font-weight-bold: 700;
26
+ --seki-font-weight-extrabold: 800;
27
+
28
+ /* Line Height Tokens */
29
+ --seki-line-height-tight: 1.25;
30
+ --seki-line-height-normal: 1.5;
31
+ --seki-line-height-relaxed: 1.75;
32
+
33
+ /* Letter Spacing Tokens */
34
+ --seki-letter-spacing-tight: -0.025em;
35
+ --seki-letter-spacing-normal: 0;
36
+ --seki-letter-spacing-wide: 0.025em;
37
+
38
+ /* Color Tokens - Light Mode */
39
+ --seki-color-text: hsl(0, 0%, 10%); /* #1a1a1a - 16.5:1 contrast on white */
40
+ --seki-color-text-muted: hsl(0, 0%, 45%); /* #737373 - 4.7:1 contrast (WCAG AA) */
41
+ --seki-color-border: hsl(0, 0%, 88%); /* #e0e0e0 */
42
+ --seki-color-border-subtle: hsl(0, 0%, 93%); /* #ededed */
43
+ --seki-color-muted: hsl(0, 0%, 96%); /* #f5f5f5 - for code backgrounds */
44
+
45
+ /* Component-Specific Tokens - Heading Sizes */
46
+ --seki-typography-h1-size-min: 2rem;
47
+ --seki-typography-h1-size-max: 2.4rem;
48
+ --seki-typography-h1-weight: var(--seki-font-weight-extrabold);
49
+
50
+ --seki-typography-h2-size-min: 1.5rem;
51
+ --seki-typography-h2-size-max: 1.875rem;
52
+ --seki-typography-h2-weight: var(--seki-font-weight-semibold);
53
+
54
+ --seki-typography-h3-size-min: 1.25rem;
55
+ --seki-typography-h3-size-max: 1.5rem;
56
+ --seki-typography-h3-weight: var(--seki-font-weight-semibold);
57
+
58
+ --seki-typography-h4-size-min: 1.125rem;
59
+ --seki-typography-h4-size-max: 1.25rem;
60
+ --seki-typography-h4-weight: var(--seki-font-weight-semibold);
61
+
62
+ /* Semantic Grouping Tokens */
63
+ --seki-typography-heading-font: var(--seki-font-sans);
64
+ --seki-typography-heading-spacing: var(--seki-letter-spacing-tight);
65
+ --seki-typography-body-font: var(--seki-font-sans);
66
+ --seki-typography-body-line-height: var(--seki-line-height-relaxed);
67
+ --seki-typography-code-font: var(--seki-font-mono);
68
+ }
69
+
70
+ /* Dark Mode Color Tokens (matching shadcn/ui) */
71
+ [data-theme="dark"] {
72
+ --seki-color-text: hsl(0, 0%, 98%); /* shadcn --foreground: oklch(0.985 0 0) ≈ 98.5% */
73
+ --seki-color-text-muted: hsl(0, 0%, 65%); /* shadcn --muted-foreground: oklch(0.708 0 0) ≈ 64.5% */
74
+ --seki-color-border: hsl(0, 0%, 27%); /* shadcn --border: oklch(0.269 0 0) */
75
+ --seki-color-border-subtle: hsl(0, 0%, 20%);/* slightly darker variant */
76
+ --seki-color-muted: hsl(0, 0%, 20%); /* shadcn --muted: oklch(0.269 0 0) */
77
+ }
package/dist/sekiui/styles/typography/variants.css ADDED
@@ -0,0 +1,25 @@
1
+ /* Typography Variants
2
+ * Text emphasis classes: lead, large, small, muted
3
+ * Reference: specs/012-time-to-do/data-model.md
4
+ */
5
+
6
+ .seki-large {
7
+ font-size: clamp(var(--seki-font-size-lg), 3vw, var(--seki-font-size-xl));
8
+ font-weight: var(--seki-font-weight-semibold);
9
+ font-family: var(--seki-font-sans);
10
+ color: var(--seki-color-text);
11
+ }
12
+
13
+ .seki-small {
14
+ font-size: var(--seki-font-size-sm);
15
+ font-weight: var(--seki-font-weight-medium);
16
+ line-height: 1.25rem;
17
+ font-family: var(--seki-font-sans);
18
+ color: var(--seki-color-text);
19
+ }
20
+
21
+ .seki-muted {
22
+ font-size: var(--seki-font-size-sm);
23
+ color: var(--seki-color-text-muted);
24
+ font-family: var(--seki-font-sans);
25
+ }
package/dist/types/styles/tokens/typography-tokens.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Typography Design Tokens
3
+ * TypeScript exports for programmatic token access
4
+ * Reference: specs/012-time-to-do/research.md Section 7
5
+ */
6
+ export declare const typographyTokens: {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sekiui/elements",
3
- "version": "0.0.38",
3
+ "version": "0.0.39",
4
4
  "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -16,7 +16,6 @@
16
16
  ],
17
17
  "scripts": {
18
18
  "build": "stencil build --docs",
19
- "start": "stencil build --dev --watch --serve",
20
19
  "test": "stencil test --spec --e2e",
21
20
  "test.watch": "stencil test --spec --e2e --watchAll",
22
21
  "test:e2e": "playwright test",