@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
48 lines (47 loc) • 1.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.searchThemes = exports.SearchTheme = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
/**
* @deprecated ⚠️ `SearchTheme` is deprecated and will be removed in a future major version. Please our CSS tokens to theme components.
*/
var SearchTheme;
(function (SearchTheme) {
SearchTheme["Light"] = "light";
SearchTheme["Dark"] = "dark";
SearchTheme["Transparent"] = "transparent";
})(SearchTheme = exports.SearchTheme || (exports.SearchTheme = {}));
/**
* @deprecated ⚠️ `searchThemes` is deprecated and will be removed in a future major version. Please our CSS tokens to theme components.
*/
exports.searchThemes = {
[SearchTheme.Transparent]: {
background: 'rgba(0, 0, 0, 0)',
backgroundFocus: 'rgba(0, 0, 0, 0)',
color: tokens_1.colors.blackPepper300,
colorFocus: tokens_1.colors.blackPepper300,
placeholderColor: tokens_1.colors.licorice300,
placeholderColorFocus: tokens_1.colors.licorice300,
boxShadow: 'none',
boxShadowFocus: 'none',
},
[SearchTheme.Light]: {
background: tokens_1.colors.soap200,
backgroundFocus: tokens_1.colors.soap200,
backgroundHover: tokens_1.colors.soap300,
color: tokens_1.colors.blackPepper300,
placeholderColor: tokens_1.colors.licorice300,
boxShadow: 'none',
boxShadowFocus: (0, common_1.focusRing)().boxShadow,
},
[SearchTheme.Dark]: {
background: 'rgba(0, 0, 0, 0.2)',
backgroundFocus: tokens_1.colors.frenchVanilla100,
color: tokens_1.colors.frenchVanilla100,
colorFocus: tokens_1.colors.blackPepper300,
placeholderColor: tokens_1.colors.frenchVanilla100,
placeholderColorFocus: tokens_1.colors.licorice300,
boxShadow: 'none',
},
};