@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
243 lines (232 loc) • 8.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useDarkMode = exports.shadowStyle = exports.overrideLightTheme = exports.overrideDarkTheme = exports.getColor = exports.forceTheme = exports.componentsG100 = exports.componentsG10 = void 0;
var _reactNative = require("react-native");
var g10 = _interopRequireWildcard(require("@carbon/themes/src/g10.js"));
var g100 = _interopRequireWildcard(require("@carbon/themes/src/g100.js"));
var _helpers = require("../helpers");
var _theme = require("./theme");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/** Theme choices available */
/** Theme definition */
let themeOverride = null;
let lightThemeOverride = {};
let darkThemeOverride = {};
/**
* Set the theme to use for all subsequent calls to the color getter.
* To change themes on the fly you must have your style declarations retrieved on loads.
* So you can destroy the view and reload after changing theme.
*
* To lock a theme (no auto themes) call this in your entry point (index or App [before any components])
*
* @param theme - The theme to force. Use null to use the system theme.
*/
const forceTheme = theme => {
themeOverride = theme;
};
/**
* Override the Carbon color theme for light mode with your own color set. Theme tokens are camelCase.
* See https://carbondesignsystem.com for tokens.
* Not all tokens will be used and you can customize the ones you care about.
* To use only this theme, use forceTheme with the same theme you are overriding.
*
* @param themeDefinition - Partial or full set of theme tokens to override.
*/
exports.forceTheme = forceTheme;
const overrideLightTheme = themeDefinition => {
if (themeDefinition && typeof themeDefinition === "object") {
lightThemeOverride = themeDefinition;
}
};
/**
* Override the Carbon color theme for dark mode with your own color set. Theme tokens are camelCase.
* See https://carbondesignsystem.com for tokens.
* Not all tokens will be used and you can customize the ones you care about.
* To use only this theme, use forceTheme with the same theme you are overriding.
*
* @param themeDefinition - Partial or full set of theme tokens to override.
*/
exports.overrideLightTheme = overrideLightTheme;
const overrideDarkTheme = themeDefinition => {
if (themeDefinition && typeof themeDefinition === "object") {
darkThemeOverride = themeDefinition;
}
};
/**
* Indicate if dark mode should be used for theming.
* @returns A boolean indicating if dark mode is used for the system.
*/
exports.overrideDarkTheme = overrideDarkTheme;
const useDarkMode = () => {
if (themeOverride) {
return themeOverride === "dark";
}
return _reactNative.Appearance.getColorScheme() === "dark";
};
/**
* @ignore
* Component colors are not part of themes and are in the main library; which is quite large. So hardcoding for now
* */
exports.useDarkMode = useDarkMode;
const componentsG10 = exports.componentsG10 = {
buttonPrimary: "#0f62fe",
buttonPrimaryHover: "#0353e9",
buttonPrimaryActive: "#002d9c",
buttonSecondary: "#393939",
buttonSecondaryHover: "#4c4c4c",
buttonSecondaryActive: "#6f6f6f",
buttonTertiary: "#0f62fe",
buttonTertiaryHover: "#0353e9",
buttonTertiaryActive: "#002d9c",
buttonHighContrastActive: "#c6c6c6",
buttonHighContrast: "#393939",
buttonHighContrastInverseActive: "#8d8d8d",
buttonHighContrastInverse: "#f4f4f4",
buttonDangerPrimary: "#da1e28",
buttonDangerSecondary: "#da1e28",
buttonDangerHover: "#ba1b23",
buttonDangerActive: "#750e13",
buttonSeparator: "#e0e0e0",
buttonDisabled: "#c6c6c6",
tagBackgroundRed: "#Ffd7D9",
tagColorRed: "#750e13",
tagHoverRed: "#ffb3b8",
tagBackgroundMagenta: "#ffd6e8",
tagColorMagenta: "#740937",
tagHoverMagenta: "#ffafd2",
tagBackgroundPurple: "#e8daff",
tagColorPurple: "#491d8b",
tagHoverPurple: "#d4bbff",
tagBackgroundBlue: "#d0e2ff",
tagColorBlue: "#002d9c",
tagHoverBlue: "#a6c8ff",
tagBackgroundCyan: "#bae6ff",
tagColorCyan: "#003a6d",
tagHoverCyan: "#82cfff",
tagBackgroundTeal: "#9ef0f0",
tagColorTeal: "#004144",
tagHoverTeal: "#3ddbd9",
tagBackgroundGreen: "#a7f0ba",
tagColorGreen: "#044317",
tagHoverGreen: "#6fdc8c",
tagBackgroundGray: "#e0e0e0",
tagColorGray: "#393939",
tagHoverGray: "#c6c6c6",
tagBackgroundCoolGray: "#dde1e6",
tagColorCoolGray: "#343a3f",
tagHoverCoolGray: "#c1c7cd",
tagBackgroundWarmGray: "#e5e0df",
tagColorWarmGray: "#3c3838",
tagHoverWarmGray: "#cac5c4",
tagColorHighContrast: "#ffffff",
tagHoverHighContrast: "#4c4c4c",
tagBackgroundHighContrast: "#393939",
notificationBackgroundError: "#fff1f1",
notificationBackgroundWarning: "#fdf6dd",
notificationBackgroundSuccess: "#defbe6",
notificationBackgroundInfo: "#edf5ff"
};
/**
* @ignore
* Component colors are not part of themes and are in the main library; which is quite large. So hardcoding for now
* */
const componentsG100 = exports.componentsG100 = {
buttonPrimary: "#0f62fe",
buttonPrimaryHover: "#0353e9",
buttonPrimaryActive: "#002d9c",
buttonSecondary: "#6f6f6f",
buttonSecondaryHover: "#606060",
buttonSecondaryActive: "#393939",
buttonTertiary: "#ffffff",
buttonTertiaryHover: "#f4f4f4",
buttonTertiaryActive: "#c6c6c6",
buttonHighContrastActive: "#393939",
buttonHighContrast: "#f4f4f4",
buttonHighContrastInverseActive: "#E8E8E8",
buttonHighContrastInverse: "#393939",
buttonDangerPrimary: "#da1e28",
buttonDangerSecondary: "#fa4d56",
buttonDangerHover: "#ba1b23",
buttonDangerActive: "#750e13",
buttonSeparator: "#161616",
buttonDisabled: "#525252",
tagBackgroundRed: "#a2191f",
tagColorRed: "#ffd7d9",
tagHoverRed: "#c21e25",
tagBackgroundMagenta: "#9f1853",
tagColorMagenta: "#ffd6e8",
tagHoverMagenta: "#bf1d63",
tagBackgroundPurple: "#6929c4",
tagColorPurple: "#e8daff",
tagHoverPurple: "#7c3dd6",
tagBackgroundBlue: "#0043ce",
tagColorBlue: "#d0e2ff",
tagHoverBlue: "#0053ff",
tagBackgroundCyan: "#00539a",
tagColorCyan: "#bae6ff",
tagHoverCyan: "#0066bd",
tagBackgroundTeal: "#005d5d",
tagColorTeal: "#9ef0f0",
tagHoverTeal: "#007070",
tagBackgroundGreen: "#0e6027",
tagColorGreen: "#a7f0ba",
tagHoverGreen: "#11742f",
tagBackgroundGray: "#525252",
tagColorGray: "#e0e0e0",
tagHoverGray: "#636363",
tagBackgroundCoolGray: "#4d5358",
tagColorCoolGray: "#dde1e6",
tagHoverCoolGray: "#5d646a",
tagBackgroundWarmGray: "#565151",
tagColorWarmGray: "#e5e0df",
tagHoverWarmGray: "#696363",
tagColorHighContrast: "#161616",
tagHoverHighContrast: "#e5e5e5",
tagBackgroundHighContrast: "#f4f4f4",
notificationBackgroundError: "#fff1f1",
notificationBackgroundWarning: "#fdf6dd",
notificationBackgroundSuccess: "#defbe6",
notificationBackgroundInfo: "#edf5ff"
};
/**
* Get the color already for the current theme
* See: https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/g10.js
* See: https://github.com/carbon-design-system/carbon/blob/main/packages/themes/src/g100.js
* @param token - the Carbon (@carbon/theme you have installed) token name in camel case.
* @param overrideTheme - force return of specific theme color (will ignore system)
*/
const getColor = (token, overrideTheme) => {
let foundLightColor = _theme.fileTheme.light[token] || lightThemeOverride[token] || g10[token] || componentsG10[token];
let foundDarkColor = _theme.fileTheme.dark[token] || darkThemeOverride[token] || g100[token] || componentsG100[token];
if (!foundLightColor) {
(0, _helpers.logIssue)("getColor: could not find requested color in light theme.", {
token
});
foundLightColor = "#161616";
}
if (!foundDarkColor) {
(0, _helpers.logIssue)("getColor: could not find requested color in dark theme.", {
token
});
foundDarkColor = "#f4f4f4";
}
if (overrideTheme) {
return overrideTheme === "dark" ? foundDarkColor : foundLightColor;
} else {
return useDarkMode() ? foundDarkColor : foundLightColor;
}
};
/** Carbon Drop shadow standard (down direction) */
exports.getColor = getColor;
const shadowStyle = exports.shadowStyle = {
elevation: 2,
shadowOpacity: 0.3,
shadowColor: "#000000",
shadowOffset: {
width: 2,
height: 3
}
};
//# sourceMappingURL=colors.js.map