@teambit/base-ui.theme.dark-theme 0.0.0-617e7a13ce4c751dee066d2cf82e1d839519b65b

package/dark-theme.compositions.module.scss

@@ -0,0 +1,74 @@
+.container {
+	background-color: var(--bit-bg-bedrock);
+	height: 100%;
+	padding: 16px;
+	border-radius: 4px;
+	box-sizing: border-box;
+	font-family: sans-serif;
+
+	* {
+		transition: all 80ms;
+	}
+}
+
+.regular {
+	padding: 8px;
+}
+
+.bg {
+	background: var(--bit-bg-color);
+	border: 1px solid var(--bit-border-color);
+	padding: 8px;
+	border-radius: 4px;
+
+	&:hover {
+		background: var(--bit-bg-heavy);
+		border: 1px solid var(--bit-border-color-heavy);
+	}
+}
+
+.accentText {
+	color: var(--bit-accent-text);
+}
+
+.strongText {
+	// can also be achieves with bold
+	color: var(--bit-text-color-heavy);
+}
+
+.btn {
+	background: var(--bit-accent-color);
+	color: var(--bit-text-on-accent);
+
+	&:hover {
+		background: var(--bit-accent-heavy);
+		// color: var(--bit-text-color-heavy);
+	}
+}
+
+.accentBg {
+	background: var(--bit-accent-bg);
+
+	border: 1px solid var(--bit-border-color);
+	padding: 8px;
+	border-radius: 4px;
+
+	&:hover {
+		background: var(--bit-accent-bg-heavy);
+		border: 1px solid var(--bit-border-color-heavy);
+		// color: var(--bit-text-color-heavy);
+	}
+}
+
+.accentCard {
+	border: 1px solid var(--bit-accent-color);
+	background: var(--bit-bg-color);
+	padding: 8px;
+	border-radius: 4px;
+
+	&:hover {
+		border-color: var(--bit-accent-heavy);
+		background: var(--bit-bg-heavy);
+		box-shadow: 0 0 0 0.125em var(--bit-accent-bg);
+	}
+}

package/dark-theme.compositions.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from 'react';
+import { primaryPalette } from '@teambit/base-ui.theme.color-definition';
+import { darkMode } from './index';
+
+import styles from './dark-theme.compositions.module.scss';
+
+const textColors = [
+	'--bit-text-color',
+	'--bit-text-color-heavy',
+	'--bit-text-color-light',
+	'--bit-text-inactive',
+];
+const borders = [
+	'--bit-border-color',
+	'--bit-border-color-heavy',
+	'--bit-border-color-light',
+	'--bit-border-color-lightest',
+];
+const accents = [
+	'--bit-accent-color',
+	'--bit-accent-heavy',
+	'--bit-accent-light',
+	'--bit-accent-text',
+	'--bit-accent-text-heavy',
+	'--bit-text-on-accent',
+	'--bit-accent-bg',
+	'--bit-accent-bg-heavy',
+];
+const backgrounds = [
+
+	'--bit-bg-color',
+	'--bit-bg-heavy',
+	'--bit-bg-heavy',
+	'--bit-bg-heaviest',
+	'--bit-bg-bedrock',
+	'--bit-bg-navigation',
+	'--bit-bg-overlay',
+	'--bit-bg-modal',
+	'--bit-bg-tooltip',
+	'--bit-bg-tooltip-heavy',
+	'--bit-bg-dent',
+];
+
+const errors = [
+	'--bit-error-color',
+	'--bit-error-heavy',
+	'--bit-error-light',
+	'--bit-error-bg',
+	'--bit-error-bg-heavy',
+];
+
+export function Texts() {
+	return (
+		<div className={darkMode} style={{ background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 }}>
+			{textColors.map((x) => (
+				<ColorBox colorName={x} />
+			))}
+		</div>
+	);
+}
+
+export function Accents() {
+	return (
+		<div className={darkMode} style={{ background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 }}>
+			{accents.map((x) => (
+				<ColorBox colorName={x} />
+			))}
+		</div>
+	);
+}
+
+export function Borders() {
+	return (
+		<div className={darkMode} style={{ background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 }}>
+			{borders.map((x) => (
+				<ColorBox colorName={x} />
+			))}
+		</div>
+	);
+}
+
+export function Backgrounds() {
+	return (
+		<div className={darkMode} style={{ background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 }}>
+			{backgrounds.map((x) => (
+				<ColorBox colorName={x} />
+			))}
+		</div>
+	);
+}
+
+export function Errors() {
+	return (
+		<div className={darkMode} style={{ background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 }}>
+			{errors.map((x) => (
+				<ColorBox colorName={x} />
+			))}
+			<div>
+				(may be deprecated in the future.
+				<br />
+				use accentColors.error instead)
+			</div>
+		</div>
+	);
+}
+
+// (property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+
+export function ThemeExample({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
+	const [isDark, setDark] = useState(true);
+
+	return (
+		<div className={isDark ? darkMode : primaryPalette} style={{ height: '100%' }}>
+			<div className={className + ' ' + styles.container} {...rest}>
+
+				<div className={styles.regular}>
+					<div className={styles.accentText}>accent text</div>
+					<div>regular content</div>
+					<button className={styles.btn} onClick={() => setDark(x => !x)}>toggle dark mode {isDark ? '🌙' : '☀️'}</button>
+				</div>
+
+				<br />
+
+				<div className={styles.bg}>
+					<div className={styles.accentText}>accent text</div>
+					<div>interactive card</div>
+					<button className={styles.btn}>accent colored box</button>
+				</div>
+
+				<br />
+
+				<div className={styles.accentBg}>
+					<div className={styles.accentText}>accent text</div>
+					<div>accent card</div>
+					<button className={styles.btn}>accent colored box</button>
+				</div>
+
+				<br />
+
+				<div className={styles.accentCard}>
+					<div>accent card variation 2</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function ColorBox({ colorName }: { colorName: string }) {
+	return (
+		<div style={{ display: 'flex', borderRadius: 4, marginBottom: 4 }}>
+			<div
+				style={{
+					background: `var(${colorName})`,
+					width: 20,
+					height: 20,
+					borderRadius: 4,
+					marginRight: 8,
+					border: '1px solid lightgray',
+				}}
+			></div>
+			<div>{colorName}</div>
+		</div>
+	);
+}

package/dark-theme.docs.mdx

@@ -0,0 +1,8 @@
+import { ThemeExample } from './dark-theme.compositions';
+
+Bit's own Dark Theme mode!  
+Overrides the default color palette with a custom, dark one.
+
+(Because of css-module's class name isolation, it does not _yet_ work perfectly with the accents.)
+
+<ThemeExample />

package/dark-theme.module.scss

@@ -0,0 +1,67 @@
+@import '~@teambit/base-ui.theme.colors/colors.module.scss';
+
+.darkMod {
+	color: #{$d10};
+	--bit-text-color: #{$d10};
+	--bit-text-color-heavy: #{$w20};
+	--bit-text-color-light: #{$d30};
+	--bit-text-inactive: #{$d40};
+	--bit-text-inactive-heavy: #{$d30};
+
+	--bit-border-color: #{$d40};
+	--bit-border-color-heavy: #{$d30};
+	--bit-border-color-light: #{$d50}; // TBD
+	--bit-border-color-lightest: #{$d50};
+
+	// -- accent -- //
+	--bit-accent-color: #{$p60};
+	--bit-accent-heavy: #{$p50};
+	--bit-accent-light: #{$p70};
+	--bit-accent-text: #{$p30};
+	--bit-accent-text-heavy: #{$p20};
+	--bit-text-on-accent: var(--bit-text-color, #{$d10});
+	--bit-accent-bg: #1a1452; // #{$p110}; TBD!
+	--bit-accent-bg-heavy: #221967; // #{$p100}; TBD!
+
+	// -- background -- //
+	// // higher number = more important, and 'closer' to the user.
+	// --bit-bg-01: #{$d70};
+	// --bit-bg-03: #{$w20};
+	// --bit-bg-05: #{$d10};
+	// --bit-bg-07: #{$d15};
+	// --bit-bg-09: #{$d20};
+	// --bit-bg-11: #{$d30};
+	--bit-bg-color: #{$d60}; // default background for interactive elements
+	--bit-bg-heavy: #{$d50}; // e.g. when hovering
+	--bit-bg-heaviest: #{$d40}; // e.g. when active ('pressed')
+	--bit-bg-bedrock: #{$d70}; // i.e. <body/> background
+	--bit-navigation: #{$d60}; // i.e. <body/> background
+	--bit-bg-overlay: #{$d60}; // e.g. button, input, etc
+	--bit-bg-modal: #{$d60}; // e.g. button, input, etc
+	--bit-bg-tooltip: #{$d60}; // e.g. button, input, etc
+	--bit-bg-tooltip-heavy: #{$d50};
+	--bit-bg-dent: #{$d60};
+
+	// -- error -- //
+	// might replace with 'error' theme
+	--bit-error-color: #{$r30};
+	--bit-error-heavy: #{$r20};
+	--bit-error-light: #{$r40};
+	--bit-error-bg: #{$r70};
+	--bit-error-bg-heavy: #{$r60};
+
+}
+
+
+// extended primary palette (WIP)
+// name 	color	lightness
+// $p110: #1a1452;	// 19.6%
+// $p100: #221967;	// 25%
+// $p90: #22158a;	// 31%
+// $p80: #2c1bb1;	// 40%
+// $p70: #3e29df;	// 52%
+// $p60: #5d4aec;	// 61$
+// $p50: #6c5ce7;	// 63%
+// $p40: #897dec;
+// $p30: #c9c3f6;
+// $p20: #eceaff;

package/dist/dark-theme.compositions.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function Texts(): React.JSX.Element;
+export declare function Accents(): React.JSX.Element;
+export declare function Borders(): React.JSX.Element;
+export declare function Backgrounds(): React.JSX.Element;
+export declare function Errors(): React.JSX.Element;
+export declare function ThemeExample({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;

package/dist/dark-theme.compositions.js

@@ -0,0 +1,150 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Texts = Texts;
+exports.Accents = Accents;
+exports.Borders = Borders;
+exports.Backgrounds = Backgrounds;
+exports.Errors = Errors;
+exports.ThemeExample = ThemeExample;
+const react_1 = __importStar(require("react"));
+const base_ui_theme_color_definition_1 = require("@teambit/base-ui.theme.color-definition");
+const index_1 = require("./index");
+const dark_theme_compositions_module_scss_1 = __importDefault(require("./dark-theme.compositions.module.scss"));
+const textColors = [
+    '--bit-text-color',
+    '--bit-text-color-heavy',
+    '--bit-text-color-light',
+    '--bit-text-inactive',
+];
+const borders = [
+    '--bit-border-color',
+    '--bit-border-color-heavy',
+    '--bit-border-color-light',
+    '--bit-border-color-lightest',
+];
+const accents = [
+    '--bit-accent-color',
+    '--bit-accent-heavy',
+    '--bit-accent-light',
+    '--bit-accent-text',
+    '--bit-accent-text-heavy',
+    '--bit-text-on-accent',
+    '--bit-accent-bg',
+    '--bit-accent-bg-heavy',
+];
+const backgrounds = [
+    '--bit-bg-color',
+    '--bit-bg-heavy',
+    '--bit-bg-heavy',
+    '--bit-bg-heaviest',
+    '--bit-bg-bedrock',
+    '--bit-bg-navigation',
+    '--bit-bg-overlay',
+    '--bit-bg-modal',
+    '--bit-bg-tooltip',
+    '--bit-bg-tooltip-heavy',
+    '--bit-bg-dent',
+];
+const errors = [
+    '--bit-error-color',
+    '--bit-error-heavy',
+    '--bit-error-light',
+    '--bit-error-bg',
+    '--bit-error-bg-heavy',
+];
+function Texts() {
+    return (react_1.default.createElement("div", { className: index_1.darkMode, style: { background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 } }, textColors.map((x) => (react_1.default.createElement(ColorBox, { colorName: x })))));
+}
+function Accents() {
+    return (react_1.default.createElement("div", { className: index_1.darkMode, style: { background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 } }, accents.map((x) => (react_1.default.createElement(ColorBox, { colorName: x })))));
+}
+function Borders() {
+    return (react_1.default.createElement("div", { className: index_1.darkMode, style: { background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 } }, borders.map((x) => (react_1.default.createElement(ColorBox, { colorName: x })))));
+}
+function Backgrounds() {
+    return (react_1.default.createElement("div", { className: index_1.darkMode, style: { background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 } }, backgrounds.map((x) => (react_1.default.createElement(ColorBox, { colorName: x })))));
+}
+function Errors() {
+    return (react_1.default.createElement("div", { className: index_1.darkMode, style: { background: '#0c0c0c', height: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 4 } },
+        errors.map((x) => (react_1.default.createElement(ColorBox, { colorName: x }))),
+        react_1.default.createElement("div", null,
+            "(may be deprecated in the future.",
+            react_1.default.createElement("br", null),
+            "use accentColors.error instead)")));
+}
+// (property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+function ThemeExample(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const [isDark, setDark] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", { className: isDark ? index_1.darkMode : base_ui_theme_color_definition_1.primaryPalette, style: { height: '100%' } },
+        react_1.default.createElement("div", Object.assign({ className: className + ' ' + dark_theme_compositions_module_scss_1.default.container }, rest),
+            react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.regular },
+                react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.accentText }, "accent text"),
+                react_1.default.createElement("div", null, "regular content"),
+                react_1.default.createElement("button", { className: dark_theme_compositions_module_scss_1.default.btn, onClick: () => setDark(x => !x) },
+                    "toggle dark mode ",
+                    isDark ? '🌙' : '☀️')),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.bg },
+                react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.accentText }, "accent text"),
+                react_1.default.createElement("div", null, "interactive card"),
+                react_1.default.createElement("button", { className: dark_theme_compositions_module_scss_1.default.btn }, "accent colored box")),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.accentBg },
+                react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.accentText }, "accent text"),
+                react_1.default.createElement("div", null, "accent card"),
+                react_1.default.createElement("button", { className: dark_theme_compositions_module_scss_1.default.btn }, "accent colored box")),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("div", { className: dark_theme_compositions_module_scss_1.default.accentCard },
+                react_1.default.createElement("div", null, "accent card variation 2")))));
+}
+function ColorBox({ colorName }) {
+    return (react_1.default.createElement("div", { style: { display: 'flex', borderRadius: 4, marginBottom: 4 } },
+        react_1.default.createElement("div", { style: {
+                background: `var(${colorName})`,
+                width: 20,
+                height: 20,
+                borderRadius: 4,
+                marginRight: 8,
+                border: '1px solid lightgray',
+            } }),
+        react_1.default.createElement("div", null, colorName)));
+}
+//# sourceMappingURL=dark-theme.compositions.js.map

package/dist/dark-theme.compositions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark-theme.compositions.js","sourceRoot":"","sources":["../dark-theme.compositions.tsx"],"names":[],"mappings":"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"}

package/dist/dark-theme.compositions.module.scss

@@ -0,0 +1,74 @@
+.container {
+	background-color: var(--bit-bg-bedrock);
+	height: 100%;
+	padding: 16px;
+	border-radius: 4px;
+	box-sizing: border-box;
+	font-family: sans-serif;
+
+	* {
+		transition: all 80ms;
+	}
+}
+
+.regular {
+	padding: 8px;
+}
+
+.bg {
+	background: var(--bit-bg-color);
+	border: 1px solid var(--bit-border-color);
+	padding: 8px;
+	border-radius: 4px;
+
+	&:hover {
+		background: var(--bit-bg-heavy);
+		border: 1px solid var(--bit-border-color-heavy);
+	}
+}
+
+.accentText {
+	color: var(--bit-accent-text);
+}
+
+.strongText {
+	// can also be achieves with bold
+	color: var(--bit-text-color-heavy);
+}
+
+.btn {
+	background: var(--bit-accent-color);
+	color: var(--bit-text-on-accent);
+
+	&:hover {
+		background: var(--bit-accent-heavy);
+		// color: var(--bit-text-color-heavy);
+	}
+}
+
+.accentBg {
+	background: var(--bit-accent-bg);
+
+	border: 1px solid var(--bit-border-color);
+	padding: 8px;
+	border-radius: 4px;
+
+	&:hover {
+		background: var(--bit-accent-bg-heavy);
+		border: 1px solid var(--bit-border-color-heavy);
+		// color: var(--bit-text-color-heavy);
+	}
+}
+
+.accentCard {
+	border: 1px solid var(--bit-accent-color);
+	background: var(--bit-bg-color);
+	padding: 8px;
+	border-radius: 4px;
+
+	&:hover {
+		border-color: var(--bit-accent-heavy);
+		background: var(--bit-bg-heavy);
+		box-shadow: 0 0 0 0.125em var(--bit-accent-bg);
+	}
+}

package/dist/dark-theme.docs.mdx

@@ -0,0 +1,8 @@
+import { ThemeExample } from './dark-theme.compositions';
+
+Bit's own Dark Theme mode!  
+Overrides the default color palette with a custom, dark one.
+
+(Because of css-module's class name isolation, it does not _yet_ work perfectly with the accents.)
+
+<ThemeExample />

package/dist/dark-theme.module.scss

@@ -0,0 +1,67 @@
+@import '~@teambit/base-ui.theme.colors/colors.module.scss';
+
+.darkMod {
+	color: #{$d10};
+	--bit-text-color: #{$d10};
+	--bit-text-color-heavy: #{$w20};
+	--bit-text-color-light: #{$d30};
+	--bit-text-inactive: #{$d40};
+	--bit-text-inactive-heavy: #{$d30};
+
+	--bit-border-color: #{$d40};
+	--bit-border-color-heavy: #{$d30};
+	--bit-border-color-light: #{$d50}; // TBD
+	--bit-border-color-lightest: #{$d50};
+
+	// -- accent -- //
+	--bit-accent-color: #{$p60};
+	--bit-accent-heavy: #{$p50};
+	--bit-accent-light: #{$p70};
+	--bit-accent-text: #{$p30};
+	--bit-accent-text-heavy: #{$p20};
+	--bit-text-on-accent: var(--bit-text-color, #{$d10});
+	--bit-accent-bg: #1a1452; // #{$p110}; TBD!
+	--bit-accent-bg-heavy: #221967; // #{$p100}; TBD!
+
+	// -- background -- //
+	// // higher number = more important, and 'closer' to the user.
+	// --bit-bg-01: #{$d70};
+	// --bit-bg-03: #{$w20};
+	// --bit-bg-05: #{$d10};
+	// --bit-bg-07: #{$d15};
+	// --bit-bg-09: #{$d20};
+	// --bit-bg-11: #{$d30};
+	--bit-bg-color: #{$d60}; // default background for interactive elements
+	--bit-bg-heavy: #{$d50}; // e.g. when hovering
+	--bit-bg-heaviest: #{$d40}; // e.g. when active ('pressed')
+	--bit-bg-bedrock: #{$d70}; // i.e. <body/> background
+	--bit-navigation: #{$d60}; // i.e. <body/> background
+	--bit-bg-overlay: #{$d60}; // e.g. button, input, etc
+	--bit-bg-modal: #{$d60}; // e.g. button, input, etc
+	--bit-bg-tooltip: #{$d60}; // e.g. button, input, etc
+	--bit-bg-tooltip-heavy: #{$d50};
+	--bit-bg-dent: #{$d60};
+
+	// -- error -- //
+	// might replace with 'error' theme
+	--bit-error-color: #{$r30};
+	--bit-error-heavy: #{$r20};
+	--bit-error-light: #{$r40};
+	--bit-error-bg: #{$r70};
+	--bit-error-bg-heavy: #{$r60};
+
+}
+
+
+// extended primary palette (WIP)
+// name 	color	lightness
+// $p110: #1a1452;	// 19.6%
+// $p100: #221967;	// 25%
+// $p90: #22158a;	// 31%
+// $p80: #2c1bb1;	// 40%
+// $p70: #3e29df;	// 52%
+// $p60: #5d4aec;	// 61$
+// $p50: #6c5ce7;	// 63%
+// $p40: #897dec;
+// $p30: #c9c3f6;
+// $p20: #eceaff;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export declare const darkMode: string;

package/dist/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkMode = void 0;
+const dark_theme_module_scss_1 = __importDefault(require("./dark-theme.module.scss"));
+exports.darkMode = dark_theme_module_scss_1.default.darkMod;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;AAAA,sFAA8C;AAEjC,QAAA,QAAQ,GAAG,gCAAM,CAAC,OAAO,CAAC"}

package/dist/preview-1758203463934.js

@@ -0,0 +1,7 @@
+import * as compositions_0 from '/tmp/capsules-root/sign-capsules/2025-8-18/gqd6v4/teambit.base-ui_theme_dark-theme@617e7a13ce4c751dee066d2cf82e1d839519b65b/dist/dark-theme.compositions.js';
+import * as overview_0 from '/tmp/capsules-root/sign-capsules/2025-8-18/gqd6v4/teambit.base-ui_theme_dark-theme@617e7a13ce4c751dee066d2cf82e1d839519b65b/dist/dark-theme.docs.mdx';
+
+export const compositions = [compositions_0];
+export const overview = [overview_0];
+
+export const compositions_metadata = {"compositions":[{"displayName":"Texts","identifier":"Texts"},{"displayName":"Accents","identifier":"Accents"},{"displayName":"Borders","identifier":"Borders"},{"displayName":"Backgrounds","identifier":"Backgrounds"},{"displayName":"Errors","identifier":"Errors"},{"displayName":"Theme example","identifier":"ThemeExample"}]};

package/index.ts

@@ -0,0 +1,3 @@
+import styles from './dark-theme.module.scss';
+
+export const darkMode = styles.darkMod;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@teambit/base-ui.theme.dark-theme",
+  "version": "0.0.0-617e7a13ce4c751dee066d2cf82e1d839519b65b",
+  "homepage": "https://bit.cloud/teambit/base-ui/theme/dark-theme",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.base-ui",
+    "name": "theme/dark-theme",
+    "version": "617e7a13ce4c751dee066d2cf82e1d839519b65b"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.theme.colors": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@teambit/base-ui.theme.color-definition": "1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}