@kookee/sdk 0.0.13 → 0.0.14

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/code.css +90 -57
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kookee/sdk",
3
- "version": "0.0.13",
3
+ "version": "0.0.14",
4
4
  "description": "Official Kookee SDK - Access your blog, changelog, help center, and more",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",
package/styles/code.css CHANGED
@@ -9,30 +9,69 @@
9
9
  * <link rel="stylesheet" href="https://unpkg.com/@kookee/sdk/styles/code.css">
10
10
  */
11
11
 
12
- /* Base code block styles */
13
- pre {
14
- background: #1e1e1e;
12
+ /* Code block wrapper with header */
13
+ .kookee-code-block {
14
+ position: relative;
15
+ margin: 1rem 0;
15
16
  border-radius: 0.5rem;
17
+ overflow: hidden;
18
+ background: #1e1e1e;
19
+ }
20
+
21
+ .kookee-code-block__header {
22
+ display: flex;
23
+ align-items: center;
24
+ justify-content: space-between;
25
+ padding: 0.5rem 0.75rem;
26
+ background: #2d2d2d;
27
+ border-bottom: 1px solid #3d3d3d;
28
+ }
29
+
30
+ .kookee-code-block__language {
31
+ font-size: 0.75rem;
32
+ color: #a0a0a0;
33
+ font-family: system-ui, -apple-system, sans-serif;
34
+ }
35
+
36
+ .kookee-code-block__copy {
37
+ font-size: 0.75rem;
38
+ color: #a0a0a0;
39
+ background: transparent;
40
+ border: none;
41
+ cursor: pointer;
42
+ padding: 0.25rem 0.5rem;
43
+ border-radius: 0.25rem;
44
+ font-family: system-ui, -apple-system, sans-serif;
45
+ transition: background-color 0.15s, color 0.15s;
46
+ }
47
+
48
+ .kookee-code-block__copy:hover {
49
+ background: #3d3d3d;
16
50
  color: #d4d4d4;
17
- font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco,
18
- 'Courier New', monospace;
19
- font-size: 0.875rem;
20
- line-height: 1.7;
51
+ }
52
+
53
+ .kookee-code-block pre {
54
+ margin: 0;
21
55
  padding: 1rem;
22
- margin: 1rem 0;
56
+ background: transparent;
57
+ border-radius: 0;
23
58
  overflow-x: auto;
59
+ line-height: 1.7;
24
60
  }
25
61
 
26
- pre code {
62
+ .kookee-code-block pre code {
63
+ display: block;
27
64
  background: none;
28
- color: inherit;
29
- font-size: inherit;
65
+ font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco,
66
+ 'Courier New', monospace;
67
+ font-size: 0.875rem;
68
+ color: #d4d4d4;
30
69
  padding: 0;
31
70
  border: none;
32
71
  }
33
72
 
34
73
  /* Inline code - Slack-style */
35
- :not(pre) > code {
74
+ .kookee-code-block code:not(pre code) {
36
75
  background-color: #f8e8ea;
37
76
  color: #c41e3a;
38
77
  padding: 0.125rem 0.375rem;
@@ -43,91 +82,85 @@ pre code {
43
82
  border: 1px solid #f0d0d4;
44
83
  }
45
84
 
46
- /* Remove Tailwind prose backticks if using Tailwind Typography */
47
- .prose code::before,
48
- .prose code::after {
49
- content: none !important;
50
- }
51
-
52
85
  /* Syntax highlighting - VS Code Dark+ theme */
53
- .hljs-comment,
54
- .hljs-quote {
86
+ .kookee-code-block .hljs-comment,
87
+ .kookee-code-block .hljs-quote {
55
88
  color: #6a9955;
56
89
  font-style: italic;
57
90
  }
58
91
 
59
- .hljs-keyword,
60
- .hljs-selector-tag,
61
- .hljs-addition {
92
+ .kookee-code-block .hljs-keyword,
93
+ .kookee-code-block .hljs-selector-tag,
94
+ .kookee-code-block .hljs-addition {
62
95
  color: #569cd6;
63
96
  }
64
97
 
65
- .hljs-number,
66
- .hljs-string,
67
- .hljs-meta .hljs-meta-string,
68
- .hljs-literal,
69
- .hljs-doctag,
70
- .hljs-regexp {
98
+ .kookee-code-block .hljs-number,
99
+ .kookee-code-block .hljs-string,
100
+ .kookee-code-block .hljs-meta .hljs-meta-string,
101
+ .kookee-code-block .hljs-literal,
102
+ .kookee-code-block .hljs-doctag,
103
+ .kookee-code-block .hljs-regexp {
71
104
  color: #ce9178;
72
105
  }
73
106
 
74
- .hljs-title,
75
- .hljs-section,
76
- .hljs-name,
77
- .hljs-selector-id,
78
- .hljs-selector-class {
107
+ .kookee-code-block .hljs-title,
108
+ .kookee-code-block .hljs-section,
109
+ .kookee-code-block .hljs-name,
110
+ .kookee-code-block .hljs-selector-id,
111
+ .kookee-code-block .hljs-selector-class {
79
112
  color: #dcdcaa;
80
113
  }
81
114
 
82
- .hljs-attribute,
83
- .hljs-attr,
84
- .hljs-variable,
85
- .hljs-template-variable,
86
- .hljs-class .hljs-title,
87
- .hljs-type {
115
+ .kookee-code-block .hljs-attribute,
116
+ .kookee-code-block .hljs-attr,
117
+ .kookee-code-block .hljs-variable,
118
+ .kookee-code-block .hljs-template-variable,
119
+ .kookee-code-block .hljs-class .hljs-title,
120
+ .kookee-code-block .hljs-type {
88
121
  color: #4ec9b0;
89
122
  }
90
123
 
91
- .hljs-symbol,
92
- .hljs-bullet,
93
- .hljs-subst,
94
- .hljs-meta,
95
- .hljs-meta .hljs-keyword,
96
- .hljs-selector-attr,
97
- .hljs-selector-pseudo,
98
- .hljs-link {
124
+ .kookee-code-block .hljs-symbol,
125
+ .kookee-code-block .hljs-bullet,
126
+ .kookee-code-block .hljs-subst,
127
+ .kookee-code-block .hljs-meta,
128
+ .kookee-code-block .hljs-meta .hljs-keyword,
129
+ .kookee-code-block .hljs-selector-attr,
130
+ .kookee-code-block .hljs-selector-pseudo,
131
+ .kookee-code-block .hljs-link {
99
132
  color: #d7ba7d;
100
133
  }
101
134
 
102
- .hljs-built_in,
103
- .hljs-deletion {
135
+ .kookee-code-block .hljs-built_in,
136
+ .kookee-code-block .hljs-deletion {
104
137
  color: #ce9178;
105
138
  }
106
139
 
107
- .hljs-formula {
140
+ .kookee-code-block .hljs-formula {
108
141
  background: #1e1e1e;
109
142
  }
110
143
 
111
- .hljs-emphasis {
144
+ .kookee-code-block .hljs-emphasis {
112
145
  font-style: italic;
113
146
  }
114
147
 
115
- .hljs-strong {
148
+ .kookee-code-block .hljs-strong {
116
149
  font-weight: bold;
117
150
  }
118
151
 
119
- .hljs-property {
152
+ .kookee-code-block .hljs-property {
120
153
  color: #9cdcfe;
121
154
  }
122
155
 
123
- .hljs-punctuation {
156
+ .kookee-code-block .hljs-punctuation {
124
157
  color: #d4d4d4;
125
158
  }
126
159
 
127
- .hljs-template-tag {
160
+ .kookee-code-block .hljs-template-tag {
128
161
  color: #569cd6;
129
162
  }
130
163
 
131
- .hljs-params {
164
+ .kookee-code-block .hljs-params {
132
165
  color: #d4d4d4;
133
166
  }