@takuhon/ui 0.1.1 → 0.3.0

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.
@@ -0,0 +1,70 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ }
39
+
40
+ .link {
41
+ color: inherit;
42
+ text-decoration: none;
43
+ }
44
+
45
+ .link:hover,
46
+ .link:focus-visible {
47
+ text-decoration: underline;
48
+ color: var(--takuhon-color-primary);
49
+ }
50
+
51
+ .link:focus-visible {
52
+ outline: 2px solid var(--takuhon-color-primary);
53
+ outline-offset: 2px;
54
+ }
55
+
56
+ .issuer {
57
+ margin: 0;
58
+ font-size: var(--takuhon-font-size-sm);
59
+ color: var(--takuhon-color-text-muted);
60
+ }
61
+
62
+ .range {
63
+ margin: 0;
64
+ font-size: var(--takuhon-font-size-sm);
65
+ color: var(--takuhon-color-text-muted);
66
+ }
67
+
68
+ .tag {
69
+ font-style: italic;
70
+ }
@@ -0,0 +1,80 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ }
39
+
40
+ .link {
41
+ color: inherit;
42
+ text-decoration: none;
43
+ }
44
+
45
+ .link:hover,
46
+ .link:focus-visible {
47
+ text-decoration: underline;
48
+ color: var(--takuhon-color-primary);
49
+ }
50
+
51
+ .link:focus-visible {
52
+ outline: 2px solid var(--takuhon-color-primary);
53
+ outline-offset: 2px;
54
+ }
55
+
56
+ .provider {
57
+ margin: 0;
58
+ font-size: var(--takuhon-font-size-sm);
59
+ color: var(--takuhon-color-text-muted);
60
+ }
61
+
62
+ .courseNumber {
63
+ margin: 0;
64
+ font-size: var(--takuhon-font-size-sm);
65
+ color: var(--takuhon-color-text-muted);
66
+ font-family: ui-monospace, SFMono-Regular, monospace;
67
+ }
68
+
69
+ .date {
70
+ margin: 0;
71
+ font-size: var(--takuhon-font-size-sm);
72
+ color: var(--takuhon-color-text-muted);
73
+ }
74
+
75
+ .description {
76
+ margin: 0;
77
+ font-size: var(--takuhon-font-size-base);
78
+ line-height: var(--takuhon-line-height);
79
+ color: var(--takuhon-color-text);
80
+ }
@@ -0,0 +1,93 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding-inline-start: var(--takuhon-space-4);
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-4);
21
+ border-inline-start: 2px solid var(--takuhon-color-border);
22
+ }
23
+
24
+ .item {
25
+ display: grid;
26
+ grid-template-columns: auto 1fr;
27
+ gap: var(--takuhon-space-3);
28
+ position: relative;
29
+ }
30
+
31
+ .timelineMarker {
32
+ width: 12px;
33
+ height: 12px;
34
+ border-radius: var(--takuhon-radius-full);
35
+ background-color: var(--takuhon-color-primary);
36
+ margin-inline-start: calc(-1 * var(--takuhon-space-4) - 6px);
37
+ margin-block-start: var(--takuhon-space-2);
38
+ flex-shrink: 0;
39
+ }
40
+
41
+ .content {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: var(--takuhon-space-1);
45
+ }
46
+
47
+ .institution {
48
+ margin: 0;
49
+ font-weight: 600;
50
+ color: var(--takuhon-color-text);
51
+ font-size: var(--takuhon-font-size-base);
52
+ }
53
+
54
+ .link {
55
+ color: inherit;
56
+ text-decoration: none;
57
+ }
58
+
59
+ .link:hover,
60
+ .link:focus-visible {
61
+ text-decoration: underline;
62
+ color: var(--takuhon-color-primary);
63
+ }
64
+
65
+ .link:focus-visible {
66
+ outline: 2px solid var(--takuhon-color-primary);
67
+ outline-offset: 2px;
68
+ }
69
+
70
+ .study {
71
+ margin: 0;
72
+ font-size: var(--takuhon-font-size-sm);
73
+ color: var(--takuhon-color-text);
74
+ }
75
+
76
+ .range {
77
+ margin: 0;
78
+ font-size: var(--takuhon-font-size-sm);
79
+ color: var(--takuhon-color-text-muted);
80
+ }
81
+
82
+ .grade {
83
+ margin: 0;
84
+ font-size: var(--takuhon-font-size-sm);
85
+ color: var(--takuhon-color-text-muted);
86
+ }
87
+
88
+ .description {
89
+ margin: 0;
90
+ font-size: var(--takuhon-font-size-base);
91
+ line-height: var(--takuhon-line-height);
92
+ color: var(--takuhon-color-text);
93
+ }
@@ -0,0 +1,63 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ }
28
+
29
+ .title {
30
+ margin: 0;
31
+ font-weight: 600;
32
+ color: var(--takuhon-color-text);
33
+ font-size: var(--takuhon-font-size-base);
34
+ }
35
+
36
+ .link {
37
+ color: inherit;
38
+ text-decoration: none;
39
+ }
40
+
41
+ .link:hover,
42
+ .link:focus-visible {
43
+ text-decoration: underline;
44
+ color: var(--takuhon-color-primary);
45
+ }
46
+
47
+ .link:focus-visible {
48
+ outline: 2px solid var(--takuhon-color-primary);
49
+ outline-offset: 2px;
50
+ }
51
+
52
+ .meta {
53
+ margin: 0;
54
+ font-size: var(--takuhon-font-size-sm);
55
+ color: var(--takuhon-color-text-muted);
56
+ }
57
+
58
+ .description {
59
+ margin: 0;
60
+ font-size: var(--takuhon-font-size-base);
61
+ line-height: var(--takuhon-line-height);
62
+ color: var(--takuhon-color-text);
63
+ }
@@ -0,0 +1,45 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-2);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ align-items: baseline;
26
+ gap: var(--takuhon-space-3);
27
+ padding-block: var(--takuhon-space-2);
28
+ border-bottom: 1px solid var(--takuhon-color-border);
29
+ }
30
+
31
+ .item:last-child {
32
+ border-bottom: none;
33
+ }
34
+
35
+ .name {
36
+ font-weight: 600;
37
+ color: var(--takuhon-color-text);
38
+ font-size: var(--takuhon-font-size-base);
39
+ }
40
+
41
+ .proficiency {
42
+ font-size: var(--takuhon-font-size-sm);
43
+ color: var(--takuhon-color-text-muted);
44
+ margin-inline-start: auto;
45
+ }
@@ -0,0 +1,87 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding-inline-start: var(--takuhon-space-4);
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-4);
21
+ border-inline-start: 2px solid var(--takuhon-color-border);
22
+ }
23
+
24
+ .item {
25
+ display: grid;
26
+ grid-template-columns: auto 1fr;
27
+ gap: var(--takuhon-space-3);
28
+ position: relative;
29
+ }
30
+
31
+ .timelineMarker {
32
+ width: 12px;
33
+ height: 12px;
34
+ border-radius: var(--takuhon-radius-full);
35
+ background-color: var(--takuhon-color-primary);
36
+ margin-inline-start: calc(-1 * var(--takuhon-space-4) - 6px);
37
+ margin-block-start: var(--takuhon-space-2);
38
+ flex-shrink: 0;
39
+ }
40
+
41
+ .content {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: var(--takuhon-space-1);
45
+ }
46
+
47
+ .organization {
48
+ margin: 0;
49
+ font-weight: 600;
50
+ color: var(--takuhon-color-text);
51
+ font-size: var(--takuhon-font-size-base);
52
+ }
53
+
54
+ .link {
55
+ color: inherit;
56
+ text-decoration: none;
57
+ }
58
+
59
+ .link:hover,
60
+ .link:focus-visible {
61
+ text-decoration: underline;
62
+ color: var(--takuhon-color-primary);
63
+ }
64
+
65
+ .link:focus-visible {
66
+ outline: 2px solid var(--takuhon-color-primary);
67
+ outline-offset: 2px;
68
+ }
69
+
70
+ .role {
71
+ margin: 0;
72
+ font-size: var(--takuhon-font-size-sm);
73
+ color: var(--takuhon-color-text);
74
+ }
75
+
76
+ .range {
77
+ margin: 0;
78
+ font-size: var(--takuhon-font-size-sm);
79
+ color: var(--takuhon-color-text-muted);
80
+ }
81
+
82
+ .description {
83
+ margin: 0;
84
+ font-size: var(--takuhon-font-size-base);
85
+ line-height: var(--takuhon-line-height);
86
+ color: var(--takuhon-color-text);
87
+ }
@@ -0,0 +1,129 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ display: flex;
39
+ flex-wrap: wrap;
40
+ align-items: center;
41
+ gap: var(--takuhon-space-2);
42
+ }
43
+
44
+ .link {
45
+ color: inherit;
46
+ text-decoration: none;
47
+ }
48
+
49
+ .link:hover,
50
+ .link:focus-visible {
51
+ text-decoration: underline;
52
+ color: var(--takuhon-color-primary);
53
+ }
54
+
55
+ .link:focus-visible {
56
+ outline: 2px solid var(--takuhon-color-primary);
57
+ outline-offset: 2px;
58
+ }
59
+
60
+ .statusBadge {
61
+ display: inline-block;
62
+ padding: 0 var(--takuhon-space-2);
63
+ font-size: var(--takuhon-font-size-sm);
64
+ font-weight: normal;
65
+ border-radius: var(--takuhon-radius-sm);
66
+ border: 1px solid var(--takuhon-color-border);
67
+ color: var(--takuhon-color-text-muted);
68
+ background-color: var(--takuhon-color-bg);
69
+ }
70
+
71
+ .statusBadge[data-status='issued'] {
72
+ border-color: var(--takuhon-color-primary);
73
+ color: var(--takuhon-color-primary);
74
+ }
75
+
76
+ .statusBadge[data-status='pending'] {
77
+ border-color: var(--takuhon-color-accent);
78
+ color: var(--takuhon-color-accent);
79
+ }
80
+
81
+ .statusBadge[data-status='expired'],
82
+ .statusBadge[data-status='abandoned'] {
83
+ font-style: italic;
84
+ }
85
+
86
+ .srOnly {
87
+ position: absolute;
88
+ width: 1px;
89
+ height: 1px;
90
+ padding: 0;
91
+ margin: -1px;
92
+ overflow: hidden;
93
+ clip: rect(0, 0, 0, 0);
94
+ white-space: nowrap;
95
+ border: 0;
96
+ }
97
+
98
+ .patentNumber {
99
+ margin: 0;
100
+ font-size: var(--takuhon-font-size-sm);
101
+ font-family: ui-monospace, SFMono-Regular, monospace;
102
+ color: var(--takuhon-color-text);
103
+ }
104
+
105
+ .office {
106
+ margin: 0;
107
+ font-size: var(--takuhon-font-size-sm);
108
+ color: var(--takuhon-color-text-muted);
109
+ }
110
+
111
+ .dates {
112
+ margin: 0;
113
+ font-size: var(--takuhon-font-size-sm);
114
+ color: var(--takuhon-color-text-muted);
115
+ }
116
+
117
+ .coInventors {
118
+ margin: 0;
119
+ font-size: var(--takuhon-font-size-sm);
120
+ color: var(--takuhon-color-text-muted);
121
+ font-style: italic;
122
+ }
123
+
124
+ .description {
125
+ margin: 0;
126
+ font-size: var(--takuhon-font-size-base);
127
+ line-height: var(--takuhon-line-height);
128
+ color: var(--takuhon-color-text);
129
+ }
@@ -0,0 +1,87 @@
1
+ .section {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--takuhon-space-3);
5
+ margin-top: var(--takuhon-space-5);
6
+ }
7
+
8
+ .heading {
9
+ margin: 0;
10
+ font-size: var(--takuhon-font-size-xl);
11
+ color: var(--takuhon-color-text);
12
+ }
13
+
14
+ .list {
15
+ list-style: none;
16
+ margin: 0;
17
+ padding: 0;
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: var(--takuhon-space-3);
21
+ }
22
+
23
+ .item {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--takuhon-space-1);
27
+ padding: var(--takuhon-space-3);
28
+ background-color: var(--takuhon-color-surface);
29
+ border: 1px solid var(--takuhon-color-border);
30
+ border-radius: var(--takuhon-radius-md);
31
+ }
32
+
33
+ .title {
34
+ margin: 0;
35
+ font-weight: 600;
36
+ color: var(--takuhon-color-text);
37
+ font-size: var(--takuhon-font-size-base);
38
+ }
39
+
40
+ .link {
41
+ color: inherit;
42
+ text-decoration: none;
43
+ }
44
+
45
+ .link:hover,
46
+ .link:focus-visible {
47
+ text-decoration: underline;
48
+ color: var(--takuhon-color-primary);
49
+ }
50
+
51
+ .link:focus-visible {
52
+ outline: 2px solid var(--takuhon-color-primary);
53
+ outline-offset: 2px;
54
+ }
55
+
56
+ .publisher {
57
+ margin: 0;
58
+ font-size: var(--takuhon-font-size-sm);
59
+ color: var(--takuhon-color-text-muted);
60
+ }
61
+
62
+ .date {
63
+ margin: 0;
64
+ font-size: var(--takuhon-font-size-sm);
65
+ color: var(--takuhon-color-text-muted);
66
+ }
67
+
68
+ .coAuthors {
69
+ margin: 0;
70
+ font-size: var(--takuhon-font-size-sm);
71
+ color: var(--takuhon-color-text-muted);
72
+ font-style: italic;
73
+ }
74
+
75
+ .doi {
76
+ margin: 0;
77
+ font-size: var(--takuhon-font-size-sm);
78
+ color: var(--takuhon-color-text-muted);
79
+ font-family: ui-monospace, SFMono-Regular, monospace;
80
+ }
81
+
82
+ .description {
83
+ margin: 0;
84
+ font-size: var(--takuhon-font-size-base);
85
+ line-height: var(--takuhon-line-height);
86
+ color: var(--takuhon-color-text);
87
+ }