@orfeas126/box-ui-elements
Version:
Box UI Elements
93 lines • 8.47 kB
JavaScript
/* eslint-disable no-underscore-dangle */
// @ts-nocheck
import * as React from 'react';
import styled, { ThemeProvider, keyframes } from 'styled-components';
import { color, text } from '@storybook/addon-knobs';
import * as vars from '../styles/variables';
import defaultTheme from '../styles/theme';
import BoxButton from '../components/button';
import BoxLogo from '../icon/logo/BoxLogo';
import { createTheme } from './createTheme';
import notes from './createTheme.stories.md';
import IconAllFiles from '../features/left-sidebar/icons/IconAllFiles';
import IconNotes from '../features/left-sidebar/icons/IconNotes';
import IconRecents from '../features/left-sidebar/icons/IconRecents';
import IconTrash from '../features/left-sidebar/icons/IconTrash';
import IconFavorites from '../features/left-sidebar/icons/IconFavorites';
import IconDevConsole from '../features/left-sidebar/icons/IconDevConsole';
const Swatch = styled.div.withConfig({
displayName: "createThemestories__Swatch",
componentId: "sc-haiqbr-0"
})(["display:inline-block;background:", ";border:1px solid ", ";height:1em;width:1em;border-radius:", ";"], p => p.color, vars.bdlGray30, vars.bdlBorderRadiusSize);
const BaseButton = styled(BoxButton).withConfig({
displayName: "createThemestories__BaseButton",
componentId: "sc-haiqbr-1"
})(["background:", ";border-color:", ";color:", ";font-weight:bold;border-radius:", ";font-size:", ";.btn:not(.is-disabled)&:hover{background:", ";border-color:", ";}.btn:not(.is-disabled)&:active{background:", ";border-color:", ";}"], props => props.theme.base.buttonBackground, props => props.theme.base.buttonBorder, props => props.theme.base.buttonForeground, vars.bdlBorderRadiusSizeMed, vars.bdlFontSizeDejaBlue, props => props.theme.base.buttonBackgroundHover, props => props.theme.base.buttonBorderHover, props => props.theme.base.buttonBackgroundActive, props => props.theme.base.buttonBorderActive);
const PrimaryButton = styled(BoxButton).withConfig({
displayName: "createThemestories__PrimaryButton",
componentId: "sc-haiqbr-2"
})(["background:", ";border-color:", ";color:", ";font-weight:bold;border-radius:", ";font-size:", ";.btn:not(.is-disabled)&:hover{background:", ";border-color:", ";}.btn:not(.is-disabled)&:active{background:", ";border-color:", ";}"], props => props.theme.primary.buttonBackground, props => props.theme.primary.buttonBorder, props => props.theme.primary.buttonForeground, vars.bdlBorderRadiusSizeMed, vars.bdlFontSizeDejaBlue, props => props.theme.primary.buttonBackgroundHover, props => props.theme.primary.buttonBorderHover, props => props.theme.primary.buttonBackgroundActive, props => props.theme.primary.buttonBorderActive);
const ThemeDemo = styled.div.withConfig({
displayName: "createThemestories__ThemeDemo",
componentId: "sc-haiqbr-3"
})(["width:200px;min-height:500px;padding:8px;border-radius:", ";display:flex;flex-direction:column;color:", ";border:1px solid ", ";background:", ";"], vars.bdlBorderRadiusSize, p => p.theme.primary.foreground, p => p.theme.primary.border, p => p.theme.primary.background);
const ThemeDemoMenuItem = styled.div.withConfig({
displayName: "createThemestories__ThemeDemoMenuItem",
componentId: "sc-haiqbr-4"
})(["cursor:pointer;padding:8px 12px;margin:2px 4px;border-radius:", ";font-weight:bold;transition:0.15s;border:1px solid;border-color:transparent;&:hover{background:", ";}&.active,&:active{background:", ";}&:focus,&:active{border-color:", ";}&.alt{background:", ";&:hover{background:", ";}}"], vars.bdlBorderRadiusSizeLarge, p => p.theme.primary.backgroundHover, p => p.theme.primary.backgroundActive, p => p.theme.primary.foreground, p => p.theme.primary.backgroundHover, p => p.theme.primary.backgroundActive);
const scroll = keyframes(["0%{right:100%;left:0%;}50%{right:0%;left:0%;}100%{right:0%;left:100%;}"]);
const ThemeDemoProgressBar = styled.div.withConfig({
displayName: "createThemestories__ThemeDemoProgressBar",
componentId: "sc-haiqbr-5"
})(["position:relative;display:inline-block;height:6px;width:300px;padding:0;&::before{position:absolute;top:0;bottom:0;left:0;content:'';background-color:", ";will-change:left,right;animation:2s ", " infinite;}"], props => props.theme.primary.progressBarBackground, scroll);
const ThemeDemoLogo = styled(BoxLogo).withConfig({
displayName: "createThemestories__ThemeDemoLogo",
componentId: "sc-haiqbr-6"
})(["width:61px;height:32px;margin:4px 4px 16px 4px;& path,& .fill-color{fill:", ";}"], props => props.theme.primary.foreground);
const ThemeDemoIcon = styled.span.withConfig({
displayName: "createThemestories__ThemeDemoIcon",
componentId: "sc-haiqbr-7"
})(["margin-right:8px;& svg{top:2px;position:relative;}& path,& .fill-color{fill:", ";}"], props => props.theme.primary.foreground);
const Footer = styled.div.withConfig({
displayName: "createThemestories__Footer",
componentId: "sc-haiqbr-8"
})(["flex:1;display:flex;flex-direction:column;justify-content:flex-end;"]);
export const ThemeExample = () => {
const colorText = text('Primary Color Hex');
const colorMap = color('Primary Color', '#0061d5');
const colorHex = /^#[0-9A-F]{6}$/i.test(colorText) ? colorText : colorMap;
const theme = colorHex ? createTheme(colorHex) : defaultTheme;
return /*#__PURE__*/React.createElement(ThemeProvider, {
theme: theme
}, /*#__PURE__*/React.createElement("div", {
style: {
float: 'right'
}
}, /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("h4", null, "theme.primary"), Object.entries(theme.primary).filter(([key]) => key !== '_debug').map(([key, val]) => /*#__PURE__*/React.createElement("div", {
key: key
}, /*#__PURE__*/React.createElement(Swatch, {
color: val
}), " ", key, " ", /*#__PURE__*/React.createElement("code", null, val))), /*#__PURE__*/React.createElement("span", null, "Theme Color Range: ", theme.primary._debug.colorRange), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("h4", null, "theme.base"), Object.entries(theme.base).map(([key, val]) => /*#__PURE__*/React.createElement("div", {
key: key
}, /*#__PURE__*/React.createElement(Swatch, {
color: val
}), " ", key, " ", /*#__PURE__*/React.createElement("code", null, val))))), /*#__PURE__*/React.createElement("div", {
style: {
marginLeft: -5
}
}, /*#__PURE__*/React.createElement(BaseButton, null, "Base"), /*#__PURE__*/React.createElement(PrimaryButton, null, "Primary")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ThemeDemoProgressBar, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ThemeDemo, null, /*#__PURE__*/React.createElement(ThemeDemoLogo, null), /*#__PURE__*/React.createElement(ThemeDemoMenuItem, {
className: "active"
}, /*#__PURE__*/React.createElement(ThemeDemoIcon, null, /*#__PURE__*/React.createElement(IconAllFiles, null)), "All Files"), /*#__PURE__*/React.createElement(ThemeDemoMenuItem, null, /*#__PURE__*/React.createElement(ThemeDemoIcon, null, /*#__PURE__*/React.createElement(IconRecents, null)), "Recents"), /*#__PURE__*/React.createElement(ThemeDemoMenuItem, null, /*#__PURE__*/React.createElement(ThemeDemoIcon, null, /*#__PURE__*/React.createElement(IconFavorites, null)), "Favorites"), /*#__PURE__*/React.createElement(ThemeDemoMenuItem, null, /*#__PURE__*/React.createElement(ThemeDemoIcon, null, /*#__PURE__*/React.createElement(IconTrash, null)), "Trash"), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(ThemeDemoMenuItem, {
className: "alt"
}, /*#__PURE__*/React.createElement(ThemeDemoIcon, null, /*#__PURE__*/React.createElement(IconNotes, null)), "Notes"), /*#__PURE__*/React.createElement(ThemeDemoMenuItem, {
className: "alt"
}, /*#__PURE__*/React.createElement(ThemeDemoIcon, null, /*#__PURE__*/React.createElement(IconDevConsole, null)), "Developer Console"))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("details", null, /*#__PURE__*/React.createElement("summary", null, "JSON Theme"), /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, JSON.stringify(theme, null, 2))))));
};
export default {
title: 'Theming/Theme',
component: ThemeExample,
parameters: {
notes
}
};
//# sourceMappingURL=createTheme.stories.js.map