added fonts
This commit is contained in:
+4
@@ -0,0 +1,4 @@
|
||||
import type { DevToolsScale } from '../components/errors/dev-tools-indicator/dev-tools-info/preferences';
|
||||
export declare function Base({ scale }: {
|
||||
scale?: DevToolsScale;
|
||||
}): import("react/jsx-runtime").JSX.Element;
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "Base", {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return Base;
|
||||
}
|
||||
});
|
||||
const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
|
||||
const _jsxruntime = require("react/jsx-runtime");
|
||||
const _css = require("../../utils/css");
|
||||
function _templateObject() {
|
||||
const data = _tagged_template_literal_loose._([
|
||||
"\n :host {\n /* \n * Although the style applied to the shadow host is isolated,\n * the element that attached the shadow host (i.e. \"nextjs-portal\")\n * is still affected by the parent's style (e.g. \"body\"). This may\n * occur style conflicts like \"display: flex\", with other children\n * elements therefore give the shadow host an absolute position.\n */\n position: absolute;\n\n --color-font: #757575;\n --color-backdrop: rgba(250, 250, 250, 0.8);\n --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n --color-title-color: #1f1f1f;\n --color-stack-notes: #777;\n\n --color-accents-1: #808080;\n --color-accents-2: #222222;\n --color-accents-3: #404040;\n\n --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n monospace;\n --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n 'Source Sans Pro', sans-serif;\n\n font-family: var(--font-stack-sans);\n font-variant-ligatures: none;\n\n /* TODO: Remove replaced ones. */\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n --shadow-none: 0 0 #0000;\n\n --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n 0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n 0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n --focus-color: var(--color-blue-800);\n --focus-ring: 2px solid var(--focus-color);\n\n --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n --rounded-none: 0px;\n --rounded-sm: 2px;\n --rounded-md: 4px;\n --rounded-md-2: 6px;\n --rounded-lg: 8px;\n --rounded-xl: 12px;\n --rounded-2xl: 16px;\n --rounded-3xl: 24px;\n --rounded-4xl: 32px;\n --rounded-full: 9999px;\n\n /* \n This value gets set from the Dev Tools preferences,\n and we use the following --size-* variables to \n scale the relevant elements.\n\n The reason why we don't rely on rem values is because\n if an app sets their root font size to something tiny, \n it feels unexpected to have the app root size leak \n into a Next.js surface.\n\n https://github.com/vercel/next.js/discussions/76812\n */\n --nextjs-dev-tools-scale: ",
|
||||
";\n --size-1: calc(1px / var(--nextjs-dev-tools-scale));\n --size-2: calc(2px / var(--nextjs-dev-tools-scale));\n --size-3: calc(3px / var(--nextjs-dev-tools-scale));\n --size-4: calc(4px / var(--nextjs-dev-tools-scale));\n --size-5: calc(5px / var(--nextjs-dev-tools-scale));\n --size-6: calc(6px / var(--nextjs-dev-tools-scale));\n --size-7: calc(7px / var(--nextjs-dev-tools-scale));\n --size-8: calc(8px / var(--nextjs-dev-tools-scale));\n --size-9: calc(9px / var(--nextjs-dev-tools-scale));\n --size-10: calc(10px / var(--nextjs-dev-tools-scale));\n --size-11: calc(11px / var(--nextjs-dev-tools-scale));\n --size-12: calc(12px / var(--nextjs-dev-tools-scale));\n --size-13: calc(13px / var(--nextjs-dev-tools-scale));\n --size-14: calc(14px / var(--nextjs-dev-tools-scale));\n --size-15: calc(15px / var(--nextjs-dev-tools-scale));\n --size-16: calc(16px / var(--nextjs-dev-tools-scale));\n --size-17: calc(17px / var(--nextjs-dev-tools-scale));\n --size-18: calc(18px / var(--nextjs-dev-tools-scale));\n --size-20: calc(20px / var(--nextjs-dev-tools-scale));\n --size-22: calc(22px / var(--nextjs-dev-tools-scale));\n --size-24: calc(24px / var(--nextjs-dev-tools-scale));\n --size-26: calc(26px / var(--nextjs-dev-tools-scale));\n --size-28: calc(28px / var(--nextjs-dev-tools-scale));\n --size-30: calc(30px / var(--nextjs-dev-tools-scale));\n --size-32: calc(32px / var(--nextjs-dev-tools-scale));\n --size-34: calc(34px / var(--nextjs-dev-tools-scale));\n --size-36: calc(36px / var(--nextjs-dev-tools-scale));\n --size-38: calc(38px / var(--nextjs-dev-tools-scale));\n --size-40: calc(40px / var(--nextjs-dev-tools-scale));\n --size-42: calc(42px / var(--nextjs-dev-tools-scale));\n --size-44: calc(44px / var(--nextjs-dev-tools-scale));\n --size-46: calc(46px / var(--nextjs-dev-tools-scale));\n --size-48: calc(48px / var(--nextjs-dev-tools-scale));\n\n @media print {\n display: none;\n }\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 8px;\n font-weight: 500;\n line-height: 1.5;\n }\n\n a {\n color: var(--color-blue-900);\n &:hover {\n color: var(--color-blue-900);\n }\n &:focus {\n outline: var(--focus-ring);\n }\n }\n "
|
||||
]);
|
||||
_templateObject = function() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function Base(param) {
|
||||
let { scale = 1 } = param;
|
||||
return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
|
||||
children: (0, _css.css)(_templateObject(), String(scale))
|
||||
});
|
||||
}
|
||||
|
||||
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
||||
Object.defineProperty(exports.default, '__esModule', { value: true });
|
||||
Object.assign(exports.default, exports);
|
||||
module.exports = exports.default;
|
||||
}
|
||||
|
||||
//# sourceMappingURL=base.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
export declare function Colors(): import("react/jsx-runtime").JSX.Element;
|
||||
+35
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
export declare function ComponentStyles(): import("react/jsx-runtime").JSX.Element;
|
||||
Generated
Vendored
+81
@@ -0,0 +1,81 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "ComponentStyles", {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return ComponentStyles;
|
||||
}
|
||||
});
|
||||
const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
|
||||
const _jsxruntime = require("react/jsx-runtime");
|
||||
const _codeframe = require("../components/code-frame/code-frame");
|
||||
const _dialog = require("../components/dialog");
|
||||
const _erroroverlaylayout = require("../components/errors/error-overlay-layout/error-overlay-layout");
|
||||
const _erroroverlaybottomstack = require("../components/errors/error-overlay-bottom-stack");
|
||||
const _erroroverlaypagination = require("../components/errors/error-overlay-pagination/error-overlay-pagination");
|
||||
const _styles = require("../components/overlay/styles");
|
||||
const _erroroverlayfooter = require("../components/errors/error-overlay-footer/error-overlay-footer");
|
||||
const _terminal = require("../components/terminal/terminal");
|
||||
const _toast = require("../components/toast");
|
||||
const _versionstalenessinfo = require("../components/version-staleness-info/version-staleness-info");
|
||||
const _builderror = require("../container/build-error");
|
||||
const _errors = require("../container/errors");
|
||||
const _runtimeerror = require("../container/runtime-error");
|
||||
const _copybutton = require("../components/copy-button");
|
||||
const _callstackframe = require("../components/call-stack-frame/call-stack-frame");
|
||||
const _devtoolsindicator = require("../components/errors/dev-tools-indicator/dev-tools-indicator");
|
||||
const _css = require("../../utils/css");
|
||||
const _editorlink = require("../components/terminal/editor-link");
|
||||
const _environmentnamelabel = require("../components/errors/environment-name-label/environment-name-label");
|
||||
const _devtoolsinfo = require("../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info");
|
||||
const _turbopackinfo = require("../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info");
|
||||
const _routeinfo = require("../components/errors/dev-tools-indicator/dev-tools-info/route-info");
|
||||
const _userpreferences = require("../components/errors/dev-tools-indicator/dev-tools-info/user-preferences");
|
||||
const _fader = require("../components/fader");
|
||||
function _templateObject() {
|
||||
const data = _tagged_template_literal_loose._([
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n ",
|
||||
"\n "
|
||||
]);
|
||||
_templateObject = function() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function ComponentStyles() {
|
||||
return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
|
||||
children: (0, _css.css)(_templateObject(), _copybutton.COPY_BUTTON_STYLES, _callstackframe.CALL_STACK_FRAME_STYLES, _environmentnamelabel.ENVIRONMENT_NAME_LABEL_STYLES, _styles.styles, _toast.styles, _dialog.styles, _erroroverlaylayout.styles, _erroroverlayfooter.styles, _erroroverlaybottomstack.styles, _erroroverlaypagination.styles, _codeframe.CODE_FRAME_STYLES, _terminal.TERMINAL_STYLES, _editorlink.EDITOR_LINK_STYLES, _builderror.styles, _errors.styles, _runtimeerror.styles, _versionstalenessinfo.styles, _devtoolsindicator.DEV_TOOLS_INDICATOR_STYLES, _devtoolsinfo.DEV_TOOLS_INFO_STYLES, _turbopackinfo.DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES, _routeinfo.DEV_TOOLS_INFO_ROUTE_INFO_STYLES, _userpreferences.DEV_TOOLS_INFO_USER_PREFERENCES_STYLES, _fader.FADER_STYLES)
|
||||
});
|
||||
}
|
||||
|
||||
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
||||
Object.defineProperty(exports.default, '__esModule', { value: true });
|
||||
Object.assign(exports.default, exports);
|
||||
module.exports = exports.default;
|
||||
}
|
||||
|
||||
//# sourceMappingURL=component-styles.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/component-styles.tsx"],"sourcesContent":["import { CODE_FRAME_STYLES } from '../components/code-frame/code-frame'\nimport { styles as dialog } from '../components/dialog'\nimport { styles as errorLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport { styles as bottomStack } from '../components/errors/error-overlay-bottom-stack'\nimport { styles as pagination } from '../components/errors/error-overlay-pagination/error-overlay-pagination'\nimport { styles as overlay } from '../components/overlay/styles'\nimport { styles as footer } from '../components/errors/error-overlay-footer/error-overlay-footer'\nimport { TERMINAL_STYLES } from '../components/terminal/terminal'\nimport { styles as toast } from '../components/toast'\nimport { styles as versionStaleness } from '../components/version-staleness-info/version-staleness-info'\nimport { styles as buildErrorStyles } from '../container/build-error'\nimport { styles as containerErrorStyles } from '../container/errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/runtime-error'\nimport { COPY_BUTTON_STYLES } from '../components/copy-button'\nimport { CALL_STACK_FRAME_STYLES } from '../components/call-stack-frame/call-stack-frame'\nimport { DEV_TOOLS_INDICATOR_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { css } from '../../utils/css'\nimport { EDITOR_LINK_STYLES } from '../components/terminal/editor-link'\nimport { ENVIRONMENT_NAME_LABEL_STYLES } from '../components/errors/environment-name-label/environment-name-label'\nimport { DEV_TOOLS_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info'\nimport { DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/turbopack-info'\nimport { DEV_TOOLS_INFO_ROUTE_INFO_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/route-info'\nimport { DEV_TOOLS_INFO_USER_PREFERENCES_STYLES } from '../components/errors/dev-tools-indicator/dev-tools-info/user-preferences'\nimport { FADER_STYLES } from '../components/fader'\n\nexport function ComponentStyles() {\n return (\n <style>\n {css`\n ${COPY_BUTTON_STYLES}\n ${CALL_STACK_FRAME_STYLES}\n ${ENVIRONMENT_NAME_LABEL_STYLES}\n ${overlay}\n ${toast}\n ${dialog}\n ${errorLayout}\n ${footer}\n ${bottomStack}\n ${pagination}\n ${CODE_FRAME_STYLES}\n ${TERMINAL_STYLES}\n ${EDITOR_LINK_STYLES}\n ${buildErrorStyles}\n ${containerErrorStyles}\n ${containerRuntimeErrorStyles}\n ${versionStaleness}\n ${DEV_TOOLS_INDICATOR_STYLES}\n ${DEV_TOOLS_INFO_STYLES}\n ${DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES}\n ${DEV_TOOLS_INFO_ROUTE_INFO_STYLES}\n ${DEV_TOOLS_INFO_USER_PREFERENCES_STYLES}\n ${FADER_STYLES}\n `}\n </style>\n )\n}\n"],"names":["ComponentStyles","style","css","COPY_BUTTON_STYLES","CALL_STACK_FRAME_STYLES","ENVIRONMENT_NAME_LABEL_STYLES","overlay","toast","dialog","errorLayout","footer","bottomStack","pagination","CODE_FRAME_STYLES","TERMINAL_STYLES","EDITOR_LINK_STYLES","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","versionStaleness","DEV_TOOLS_INDICATOR_STYLES","DEV_TOOLS_INFO_STYLES","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","DEV_TOOLS_INFO_ROUTE_INFO_STYLES","DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","FADER_STYLES"],"mappings":";;;;+BAyBgBA;;;eAAAA;;;;;2BAzBkB;wBACD;oCACK;yCACA;wCACD;wBACH;oCACD;0BACD;uBACA;sCACW;4BACA;wBACI;8BACO;4BACnB;gCACK;mCACG;qBACvB;4BACe;sCACW;8BACR;+BACe;2BACJ;iCACM;uBAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEtB,SAASA;IACd,qBACE,qBAACC;sBACEC,QAAG,qBACAC,8BAAkB,EAClBC,uCAAuB,EACvBC,mDAA6B,EAC7BC,cAAO,EACPC,aAAK,EACLC,cAAM,EACNC,0BAAW,EACXC,0BAAM,EACNC,+BAAW,EACXC,8BAAU,EACVC,4BAAiB,EACjBC,yBAAe,EACfC,8BAAkB,EAClBC,kBAAgB,EAChBC,cAAoB,EACpBC,oBAA2B,EAC3BC,4BAAgB,EAChBC,6CAA0B,EAC1BC,mCAAqB,EACrBC,mDAAoC,EACpCC,2CAAgC,EAChCC,uDAAsC,EACtCC,mBAAY;;AAItB"}
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
export declare function CssReset(): import("react/jsx-runtime").JSX.Element;
|
||||
Generated
Vendored
+37
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
export declare function DarkTheme(): import("react/jsx-runtime").JSX.Element;
|
||||
Generated
Vendored
+41
@@ -0,0 +1,41 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
Object.defineProperty(exports, "DarkTheme", {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return DarkTheme;
|
||||
}
|
||||
});
|
||||
const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
|
||||
const _jsxruntime = require("react/jsx-runtime");
|
||||
const _css = require("../../utils/css");
|
||||
function _templateObject() {
|
||||
const data = _tagged_template_literal_loose._([
|
||||
"\n :host(.dark) {\n ",
|
||||
"\n ",
|
||||
"\n }\n\n @media (prefers-color-scheme: dark) {\n :host(:not(.light)) {\n ",
|
||||
"\n ",
|
||||
"\n }\n }\n "
|
||||
]);
|
||||
_templateObject = function() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
const colors = "\n /* Background Dark */\n --color-background-100: #0a0a0a;\n --color-background-200: #000000;\n\n /* Syntax Dark */\n --color-syntax-comment: #a0a0a0;\n --color-syntax-constant: #ededed;\n --color-syntax-function: #52a9ff;\n --color-syntax-keyword: #f76e99;\n --color-syntax-link: #0ac5b2;\n --color-syntax-parameter: #f1a10d;\n --color-syntax-punctuation: #ededed;\n --color-syntax-string: #0ac5b2;\n --color-syntax-string-expression: #0ac5b2;\n\n /* Gray Scale Dark */\n --color-gray-100: #1a1a1a;\n --color-gray-200: #1f1f1f;\n --color-gray-300: #292929;\n --color-gray-400: #2e2e2e;\n --color-gray-500: #454545;\n --color-gray-600: #878787;\n --color-gray-700: #8f8f8f;\n --color-gray-800: #7d7d7d;\n --color-gray-900: #a0a0a0;\n --color-gray-1000: #ededed;\n\n /* Gray Alpha Scale Dark */\n --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n /* Blue Scale Dark */\n --color-blue-100: #0f1b2d;\n --color-blue-200: #10243e;\n --color-blue-300: #0f3058;\n --color-blue-400: #0d3868;\n --color-blue-500: #0a4481;\n --color-blue-600: #0091ff;\n --color-blue-700: #0070f3;\n --color-blue-800: #0060d1;\n --color-blue-900: #52a9ff;\n --color-blue-1000: #eaf6ff;\n\n /* Red Scale Dark */\n --color-red-100: #2a1314;\n --color-red-200: #3d1719;\n --color-red-300: #551a1e;\n --color-red-400: #671e22;\n --color-red-500: #822025;\n --color-red-600: #e5484d;\n --color-red-700: #e5484d;\n --color-red-800: #da3036;\n --color-red-900: #ff6369;\n --color-red-1000: #ffecee;\n\n /* Amber Scale Dark */\n --color-amber-100: #271700;\n --color-amber-200: #341c00;\n --color-amber-300: #4a2900;\n --color-amber-400: #573300;\n --color-amber-500: #693f05;\n --color-amber-600: #e79c13;\n --color-amber-700: #ffb224;\n --color-amber-800: #ff990a;\n --color-amber-900: #f1a10d;\n --color-amber-1000: #fef3dd;\n\n /* Green Scale Dark */\n --color-green-100: #0b2211;\n --color-green-200: #0f2c17;\n --color-green-300: #11351b;\n --color-green-400: #0c461b;\n --color-green-500: #126427;\n --color-green-600: #1a9338;\n --color-green-700: #46a758;\n --color-green-800: #388e4a;\n --color-green-900: #63c174;\n --color-green-1000: #e5fbeb;\n\n /* Turbopack Dark - Temporary */\n --color-turbopack-text-red: #ff6d92;\n --color-turbopack-text-blue: #45b2ff;\n --color-turbopack-border-red: #6e293b;\n --color-turbopack-border-blue: #284f80;\n --color-turbopack-background-red: #250d12;\n --color-turbopack-background-blue: #0a1723;\n";
|
||||
const base = "\n --color-font: white;\n --color-backdrop: rgba(0, 0, 0, 0.8);\n --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n --color-title-color: #fafafa;\n --color-stack-notes: #a9a9a9;\n";
|
||||
function DarkTheme() {
|
||||
return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
|
||||
children: (0, _css.css)(_templateObject(), base, colors, base, colors)
|
||||
});
|
||||
}
|
||||
|
||||
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
||||
Object.defineProperty(exports.default, '__esModule', { value: true });
|
||||
Object.assign(exports.default, exports);
|
||||
module.exports = exports.default;
|
||||
}
|
||||
|
||||
//# sourceMappingURL=dark-theme.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/dark-theme.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nconst colors = `\n /* Background Dark */\n --color-background-100: #0a0a0a;\n --color-background-200: #000000;\n\n /* Syntax Dark */\n --color-syntax-comment: #a0a0a0;\n --color-syntax-constant: #ededed;\n --color-syntax-function: #52a9ff;\n --color-syntax-keyword: #f76e99;\n --color-syntax-link: #0ac5b2;\n --color-syntax-parameter: #f1a10d;\n --color-syntax-punctuation: #ededed;\n --color-syntax-string: #0ac5b2;\n --color-syntax-string-expression: #0ac5b2;\n\n /* Gray Scale Dark */\n --color-gray-100: #1a1a1a;\n --color-gray-200: #1f1f1f;\n --color-gray-300: #292929;\n --color-gray-400: #2e2e2e;\n --color-gray-500: #454545;\n --color-gray-600: #878787;\n --color-gray-700: #8f8f8f;\n --color-gray-800: #7d7d7d;\n --color-gray-900: #a0a0a0;\n --color-gray-1000: #ededed;\n\n /* Gray Alpha Scale Dark */\n --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n /* Blue Scale Dark */\n --color-blue-100: #0f1b2d;\n --color-blue-200: #10243e;\n --color-blue-300: #0f3058;\n --color-blue-400: #0d3868;\n --color-blue-500: #0a4481;\n --color-blue-600: #0091ff;\n --color-blue-700: #0070f3;\n --color-blue-800: #0060d1;\n --color-blue-900: #52a9ff;\n --color-blue-1000: #eaf6ff;\n\n /* Red Scale Dark */\n --color-red-100: #2a1314;\n --color-red-200: #3d1719;\n --color-red-300: #551a1e;\n --color-red-400: #671e22;\n --color-red-500: #822025;\n --color-red-600: #e5484d;\n --color-red-700: #e5484d;\n --color-red-800: #da3036;\n --color-red-900: #ff6369;\n --color-red-1000: #ffecee;\n\n /* Amber Scale Dark */\n --color-amber-100: #271700;\n --color-amber-200: #341c00;\n --color-amber-300: #4a2900;\n --color-amber-400: #573300;\n --color-amber-500: #693f05;\n --color-amber-600: #e79c13;\n --color-amber-700: #ffb224;\n --color-amber-800: #ff990a;\n --color-amber-900: #f1a10d;\n --color-amber-1000: #fef3dd;\n\n /* Green Scale Dark */\n --color-green-100: #0b2211;\n --color-green-200: #0f2c17;\n --color-green-300: #11351b;\n --color-green-400: #0c461b;\n --color-green-500: #126427;\n --color-green-600: #1a9338;\n --color-green-700: #46a758;\n --color-green-800: #388e4a;\n --color-green-900: #63c174;\n --color-green-1000: #e5fbeb;\n\n /* Turbopack Dark - Temporary */\n --color-turbopack-text-red: #ff6d92;\n --color-turbopack-text-blue: #45b2ff;\n --color-turbopack-border-red: #6e293b;\n --color-turbopack-border-blue: #284f80;\n --color-turbopack-background-red: #250d12;\n --color-turbopack-background-blue: #0a1723;\n`\n\nconst base = `\n --color-font: white;\n --color-backdrop: rgba(0, 0, 0, 0.8);\n --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n --color-title-color: #fafafa;\n --color-stack-notes: #a9a9a9;\n`\n\nexport function DarkTheme() {\n return (\n <style>{css`\n :host(.dark) {\n ${base}\n ${colors}\n }\n\n @media (prefers-color-scheme: dark) {\n :host(:not(.light)) {\n ${base}\n ${colors}\n }\n }\n `}</style>\n )\n}\n"],"names":["DarkTheme","colors","base","style","css"],"mappings":";;;;+BA4GgBA;;;eAAAA;;;;;qBA5GI;;;;;;;;;;;;;;AAEpB,MAAMC,SAAU;AAiGhB,MAAMC,OAAQ;AASP,SAASF;IACd,qBACE,qBAACG;sBAAOC,QAAG,qBAELF,MACAD,QAKEC,MACAD;;AAKZ"}
|
||||
Reference in New Issue
Block a user