@redocly/theme 0.1.14 → 0.1.15

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.
@@ -3,15 +3,36 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __importDefault = (this && this.__importDefault) || function (mod) {
7
- return (mod && mod.__esModule) ? mod : { "default": mod };
6
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ var desc = Object.getOwnPropertyDescriptor(m, k);
9
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
10
+ desc = { enumerable: true, get: function() { return m[k]; } };
11
+ }
12
+ Object.defineProperty(o, k2, desc);
13
+ }) : (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ o[k2] = m[k];
16
+ }));
17
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
18
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
19
+ }) : function(o, v) {
20
+ o["default"] = v;
21
+ });
22
+ var __importStar = (this && this.__importStar) || function (mod) {
23
+ if (mod && mod.__esModule) return mod;
24
+ var result = {};
25
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
26
+ __setModuleDefault(result, mod);
27
+ return result;
8
28
  };
9
29
  Object.defineProperty(exports, "__esModule", { value: true });
10
30
  exports.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = void 0;
11
- var styled_components_1 = __importDefault(require("styled-components"));
12
- var _theme_1 = require("../../index.js");
31
+ var styled_components_1 = __importStar(require("styled-components"));
13
32
  exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 5px;\n"], ["\n position: absolute;\n top: 12px;\n right: 5px;\n"])));
14
33
  exports.CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0 5px;\n border-radius: 4px;\n display: none;\n &:hover {\n cursor: pointer;\n }\n"], ["\n padding: 0 5px;\n border-radius: 4px;\n display: none;\n &:hover {\n cursor: pointer;\n }\n"])));
15
34
  exports.DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 5px;\n border-radius: 4px;\n cursor: default;\n"], ["\n padding: 0 5px;\n border-radius: 4px;\n cursor: default;\n"])));
16
- exports.Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", ",\n ", " {\n color: rgba(255, 255, 255, 0.15);\n }\n ", ":hover {\n color: white;\n outline: 1px solid white;\n }\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n pre {\n white-space: var(--code-wrap);\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n font-family: var(--code-font-family);\n background-color: var(--code-block-preformatted-background-color);\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: white;\n &:before,\n &:after {\n content: none;\n }\n }\n }\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: var(--global-border-radius);\n }\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n .token.namespace {\n opacity: 0.7;\n }\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n\n ", "\n }\n"], ["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", ",\n ", " {\n color: rgba(255, 255, 255, 0.15);\n }\n ", ":hover {\n color: white;\n outline: 1px solid white;\n }\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n pre {\n white-space: var(--code-wrap);\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n font-family: var(--code-font-family);\n background-color: var(--code-block-preformatted-background-color);\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: white;\n &:before,\n &:after {\n content: none;\n }\n }\n }\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: var(--global-border-radius);\n }\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n .token.namespace {\n opacity: 0.7;\n }\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n\n ", "\n }\n"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, (0, _theme_1.generateCodeBlockTokens)());
17
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
35
+ var lightStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n .token.namespace {\n opacity: 0.7;\n }\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n"], ["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: #999988;\n font-style: italic;\n }\n .token.namespace {\n opacity: 0.7;\n }\n .token.string,\n .token.attr-value {\n color: #e3116c;\n }\n .token.punctuation,\n .token.operator {\n color: #393a34; /* no highlight */\n }\n .token.entity,\n .token.url,\n .token.symbol,\n .token.number,\n .token.boolean,\n .token.variable,\n .token.constant,\n .token.property,\n .token.regex,\n .token.inserted {\n color: #36acaa;\n }\n .token.atrule,\n .token.keyword,\n .token.attr-name,\n .language-autohotkey .token.selector {\n color: #00a4db;\n }\n .token.function,\n .token.deleted,\n .language-autohotkey .token.tag {\n color: #9a050f;\n }\n .token.tag,\n .token.selector,\n .language-autohotkey .token.keyword {\n color: #00009f;\n }\n"])));
36
+ var darkStyleTokens = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: hsl(30, 20%, 50%);\n }\n .token.property,\n .token.tag,\n .token.number,\n .token.constant,\n .token.symbol {\n color: #62bff9;\n }\n .token.boolean {\n color: firebrick;\n }\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #a0fbaa;\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n .token.operator,\n .token.entity,\n .token.url,\n .token.variable {\n color: hsl(40, 90%, 60%);\n }\n .token.atrule,\n .token.attr-value,\n .token.keyword {\n color: hsl(350, 40%, 70%);\n }\n .token.regex,\n .token.important {\n color: #e90;\n }\n .token.deleted {\n color: red;\n }\n"], ["\n .token.comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n color: hsl(30, 20%, 50%);\n }\n .token.property,\n .token.tag,\n .token.number,\n .token.constant,\n .token.symbol {\n color: #62bff9;\n }\n .token.boolean {\n color: firebrick;\n }\n .token.selector,\n .token.attr-name,\n .token.string,\n .token.char,\n .token.builtin,\n .token.inserted {\n color: #a0fbaa;\n & + a,\n & + a:visited {\n color: #4ed2ba;\n text-decoration: underline;\n }\n }\n .token.operator,\n .token.entity,\n .token.url,\n .token.variable {\n color: hsl(40, 90%, 60%);\n }\n .token.atrule,\n .token.attr-value,\n .token.keyword {\n color: hsl(350, 40%, 70%);\n }\n .token.regex,\n .token.important {\n color: #e90;\n }\n .token.deleted {\n color: red;\n }\n"])));
37
+ exports.Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", ",\n ", " {\n color: rgba(255, 255, 255, 0.15);\n }\n ", ":hover {\n color: #fff;\n background-color: rgba(255, 255, 255, 0.15);\n }\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n pre {\n white-space: var(--code-wrap);\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n font-family: var(--code-font-family);\n background-color: var(--code-block-preformatted-background-color);\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: white;\n &:before,\n &:after {\n content: none;\n }\n }\n }\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: var(--global-border-radius);\n }\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n ", ";\n }\n"], ["\n overflow: auto;\n border-radius: 4px;\n position: relative;\n\n ", ",\n ", " {\n color: rgba(255, 255, 255, 0.15);\n }\n ", ":hover {\n color: #fff;\n background-color: rgba(255, 255, 255, 0.15);\n }\n\n &:hover {\n ", " ", " {\n display: block;\n }\n }\n pre {\n white-space: var(--code-wrap);\n color: white;\n padding: 12px 14px 15px 14px;\n overflow-x: auto;\n line-height: normal;\n border-radius: 4px;\n font-family: var(--code-font-family);\n background-color: var(--code-block-preformatted-background-color);\n code {\n background-color: transparent;\n border: 0;\n padding: 0;\n color: white;\n &:before,\n &:after {\n content: none;\n }\n }\n }\n pre[class*='language-'] {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border: 0;\n border-radius: var(--global-border-radius);\n }\n code[class='language-text'] {\n line-height: 1.2em;\n display: inline-flex;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n code[class*='language-'],\n pre[class*='language-'] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n .token.entity {\n cursor: help;\n }\n .token.punctuation {\n opacity: 0.7;\n }\n .namespace {\n opacity: 0.7;\n }\n\n ", ";\n }\n"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, darkStyleTokens);
38
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.1.14",
3
+ "version": "0.1.15",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -1,6 +1,4 @@
1
- import styled from 'styled-components';
2
-
3
- import { generateCodeBlockTokens } from '@theme';
1
+ import styled, { css } from 'styled-components';
4
2
 
5
3
  export const CodeSampleButtonContainer = styled.div`
6
4
  position: absolute;
@@ -23,6 +21,105 @@ export const DoneIndicator = styled.div`
23
21
  cursor: default;
24
22
  `;
25
23
 
24
+ const lightStyleTokens = css`
25
+ .token.comment,
26
+ .token.prolog,
27
+ .token.doctype,
28
+ .token.cdata {
29
+ color: #999988;
30
+ font-style: italic;
31
+ }
32
+ .token.namespace {
33
+ opacity: 0.7;
34
+ }
35
+ .token.string,
36
+ .token.attr-value {
37
+ color: #e3116c;
38
+ }
39
+ .token.punctuation,
40
+ .token.operator {
41
+ color: #393a34; /* no highlight */
42
+ }
43
+ .token.entity,
44
+ .token.url,
45
+ .token.symbol,
46
+ .token.number,
47
+ .token.boolean,
48
+ .token.variable,
49
+ .token.constant,
50
+ .token.property,
51
+ .token.regex,
52
+ .token.inserted {
53
+ color: #36acaa;
54
+ }
55
+ .token.atrule,
56
+ .token.keyword,
57
+ .token.attr-name,
58
+ .language-autohotkey .token.selector {
59
+ color: #00a4db;
60
+ }
61
+ .token.function,
62
+ .token.deleted,
63
+ .language-autohotkey .token.tag {
64
+ color: #9a050f;
65
+ }
66
+ .token.tag,
67
+ .token.selector,
68
+ .language-autohotkey .token.keyword {
69
+ color: #00009f;
70
+ }
71
+ `;
72
+
73
+ const darkStyleTokens = css`
74
+ .token.comment,
75
+ .token.prolog,
76
+ .token.doctype,
77
+ .token.cdata {
78
+ color: hsl(30, 20%, 50%);
79
+ }
80
+ .token.property,
81
+ .token.tag,
82
+ .token.number,
83
+ .token.constant,
84
+ .token.symbol {
85
+ color: #62bff9;
86
+ }
87
+ .token.boolean {
88
+ color: firebrick;
89
+ }
90
+ .token.selector,
91
+ .token.attr-name,
92
+ .token.string,
93
+ .token.char,
94
+ .token.builtin,
95
+ .token.inserted {
96
+ color: #a0fbaa;
97
+ & + a,
98
+ & + a:visited {
99
+ color: #4ed2ba;
100
+ text-decoration: underline;
101
+ }
102
+ }
103
+ .token.operator,
104
+ .token.entity,
105
+ .token.url,
106
+ .token.variable {
107
+ color: hsl(40, 90%, 60%);
108
+ }
109
+ .token.atrule,
110
+ .token.attr-value,
111
+ .token.keyword {
112
+ color: hsl(350, 40%, 70%);
113
+ }
114
+ .token.regex,
115
+ .token.important {
116
+ color: #e90;
117
+ }
118
+ .token.deleted {
119
+ color: red;
120
+ }
121
+ `;
122
+
26
123
  export const Wrapper = styled.div`
27
124
  overflow: auto;
28
125
  border-radius: 4px;
@@ -33,8 +130,8 @@ export const Wrapper = styled.div`
33
130
  color: rgba(255, 255, 255, 0.15);
34
131
  }
35
132
  ${CopyCodeButton}:hover {
36
- color: white;
37
- outline: 1px solid white;
133
+ color: #fff;
134
+ background-color: rgba(255, 255, 255, 0.15);
38
135
  }
39
136
 
40
137
  &:hover {
@@ -107,53 +204,6 @@ export const Wrapper = styled.div`
107
204
  opacity: 0.7;
108
205
  }
109
206
 
110
- .token.comment,
111
- .token.prolog,
112
- .token.doctype,
113
- .token.cdata {
114
- color: #999988;
115
- font-style: italic;
116
- }
117
- .token.namespace {
118
- opacity: 0.7;
119
- }
120
- .token.string,
121
- .token.attr-value {
122
- color: #e3116c;
123
- }
124
- .token.punctuation,
125
- .token.operator {
126
- color: #393a34; /* no highlight */
127
- }
128
- .token.entity,
129
- .token.url,
130
- .token.symbol,
131
- .token.number,
132
- .token.boolean,
133
- .token.variable,
134
- .token.constant,
135
- .token.property,
136
- .token.regex,
137
- .token.inserted {
138
- color: #36acaa;
139
- }
140
- .token.atrule,
141
- .token.keyword,
142
- .token.attr-name,
143
- .language-autohotkey .token.selector {
144
- color: #00a4db;
145
- }
146
- .token.function,
147
- .token.deleted,
148
- .language-autohotkey .token.tag {
149
- color: #9a050f;
150
- }
151
- .token.tag,
152
- .token.selector,
153
- .language-autohotkey .token.keyword {
154
- color: #00009f;
155
- }
156
-
157
- ${generateCodeBlockTokens()}
207
+ ${darkStyleTokens};
158
208
  }
159
209
  `;
@@ -1,6 +1,6 @@
1
1
  export class ClipboardService {
2
2
  static isSupported(): boolean {
3
- return typeof navigator?.clipboard !== 'undefined';
3
+ return typeof navigator !== 'undefined' && !!navigator.clipboard;
4
4
  }
5
5
 
6
6
  static copyCustom(text: string): Promise<void> {
@@ -5,7 +5,7 @@ var ClipboardService = /** @class */ (function () {
5
5
  function ClipboardService() {
6
6
  }
7
7
  ClipboardService.isSupported = function () {
8
- return typeof (navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) !== 'undefined';
8
+ return typeof navigator !== 'undefined' && !!navigator.clipboard;
9
9
  };
10
10
  ClipboardService.copyCustom = function (text) {
11
11
  return navigator.clipboard.writeText(text);