@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
319 lines (307 loc) • 9.4 kB
JavaScript
import require$$0 from 'tailwindcss/defaultTheme';
import require$$1 from '../src/tokens/breakpoints.js';
import require$$2 from '../src/tokens/zIndexes.js';
import { __require as requireHelpers } from './helpers.js';
import { __require as requireTailwindcssGenerators } from './tailwindcssGenerators.js';
/*
FOR NODE ENVIRONMENT ONLY
Do never import tailwind file config (or helpers importing it) into Cobalt
components/stories on src/ side, it will result to have tailwindcss unecessary
dependencies into build files.
See https://github.com/tailwindcss/tailwindcss/issues/634#issuecomment-459740859
If you need data from the theme configuration, you can do the same as we did
for colors:
- create a json token file with the data needed (will be the single source of data)
- In the tailwindcss config file: import and use this json file
- In the src/ side: import and use this json file also
*/
var getCobaltTailwindcssConfig_1;
var hasRequiredGetCobaltTailwindcssConfig;
function requireGetCobaltTailwindcssConfig () {
if (hasRequiredGetCobaltTailwindcssConfig) return getCobaltTailwindcssConfig_1;
hasRequiredGetCobaltTailwindcssConfig = 1;
const defaultTheme = require$$0;
const breakpoints = require$$1;
const zIndexes = require$$2;
const { getColorsUsingCSSVariables } = requireHelpers();
const generators = requireTailwindcssGenerators();
const CSS_VAR_STATE_INTERACTIVE_COLOR = "--c-state-interactive-color";
const rem = (value) => `${value}rem`;
const REM = {
_12px: 0.75,
_14px: 0.875,
_15px: 0.9375,
_16px: 1,
_18px: 1.125,
_20px: 1.25,
_24px: 1.5,
_28px: 1.75,
_32px: 2,
_36px: 2.25,
_40px: 2.5,
_44px: 2.75,
_56px: 3.5,
_60px: 3.75,
_64px: 4,
};
const { themeColors, stateColors } = getColorsUsingCSSVariables({
additionalColors: { transparent: "transparent", current: "currentColor" },
});
const baseFont =
"BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif";
const getCobaltTailwindcssConfig = ({ content, safelist = undefined }) => ({
content,
safelist: safelist,
prefix: "c-",
// utilities to disable
corePlugins: {
// Don't use Tailwindcss reset and default styles
preflight: false,
// Handle by custom classes via generators
letterSpacing: false,
lineHeight: false,
borderStyle: false,
borderWidth: false,
fontSize: false,
// Not needed, at least for now
textOpacity: false,
backgroundOpacity: false,
caretColor: false,
boxShadowColor: false,
ringOffsetColor: false,
gradientColorStops: false,
gradientColorStopPositions: false,
textDecorationColor: false,
},
theme: {
extend: {
transitionProperty: {
interactive: `${CSS_VAR_STATE_INTERACTIVE_COLOR}`,
DEFAULT: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.DEFAULT}`,
colors: `${CSS_VAR_STATE_INTERACTIVE_COLOR}, ${defaultTheme.transitionProperty.colors}`,
},
},
colors: themeColors,
semanticStateColor: {
interactive: {
DEFAULT: themeColors.transparent,
hover: stateColors.hover,
press: stateColors.press,
},
onDrag: stateColors.drag,
none: {
DEFAULT: themeColors.transparent,
hover: themeColors.transparent,
press: themeColors.transparent,
},
},
borderStyle: {
solid: "solid",
dashed: "dashed",
none: "none",
},
borderWidth: {
0: "0",
"0_5": "0.5px",
DEFAULT: "1px",
2: "0.125rem",
4: ".25rem",
},
borderRadius: {
none: "0",
DEFAULT: ".25rem", // c-rounded
md: ".375rem",
lg: ".5rem",
xl: ".75rem",
"2xl": "1rem",
full: "9999px", // full rounded
},
boxShadow: {
DEFAULT: "0 0.125rem 0.75rem rgba(0, 0, 0, 0.1)", // c-shadow
md: "0 0.25rem 1.5rem rgba(0, 0, 0, 0.15)",
lg: "0 0.375rem 2.25rem rgba(0, 0, 0, 0.2)",
},
fontFamily: {
base: baseFont,
brand: `BrownPro,${baseFont}`,
mono: "Consolas,'Liberation Mono',Menlo,Courier,monospace",
},
fontWeight: {
regular: "400",
bold: "600",
},
spacing: {
none: "0",
"2xs": ".25rem",
xs: ".5rem",
sm: "1rem",
md: "1.5rem",
lg: "2rem",
xl: "3rem",
"2xl": "4rem",
},
screens: { ...breakpoints },
zIndex: Object.fromEntries(
Object.entries(zIndexes).map(([key, value]) => [key, value.toString()])
),
// custom properties, not processed by Tailwindcss itself
customText: ({ theme }) => ({
link: {
cursor: "pointer",
textDecoration: "underline",
fontWeight: 500,
textUnderlineOffset: "2px",
hover: {
textDecoration: "none",
},
focus: {
textDecoration: "none",
},
},
linkVariant: {
cursor: "pointer",
textDecoration: "none",
fontWeight: 500,
textUnderlineOffset: "2px",
hover: {
textDecoration: "underline",
},
focus: {
textDecoration: "underline",
},
},
heading: {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._36px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: "-0.5px",
from: {
sm: {
fontSize: rem(REM._56px),
},
},
},
subheading: {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._20px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: "-0.5px",
from: {
sm: {
fontSize: rem(REM._28px),
},
},
},
"title-xl": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._32px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: rem((-2 / 100) * REM._32px),
from: {
sm: {
fontSize: rem(REM._40px),
letterSpacing: rem((-2 / 100) * REM._40px),
},
},
},
"title-lg": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._24px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: rem((-2 / 100) * REM._24px),
from: {
sm: {
fontSize: rem(REM._32px),
letterSpacing: rem((-2 / 100) * REM._32px),
},
},
},
"title-md": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._20px),
lineHeight: "125%",
fontWeight: 700,
letterSpacing: rem((-2 / 100) * REM._20px),
from: {
sm: {
fontSize: rem(REM._24px),
letterSpacing: rem((-2 / 100) * REM._24px),
},
},
},
"title-sm": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._16px),
lineHeight: "125%",
fontWeight: 600,
letterSpacing: rem((-2 / 100) * REM._16px),
from: {
sm: {
fontSize: rem(REM._20px),
letterSpacing: rem((-2 / 100) * REM._20px),
},
},
},
"title-xs": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._16px),
lineHeight: "125%",
fontWeight: 600,
letterSpacing: rem((-2 / 100) * REM._16px),
},
//
"body-lg": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._18px),
lineHeight: rem(REM._24px),
},
"body-md": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._16px),
lineHeight: rem(REM._24px),
},
"body-sm": {
fontFamily: theme("fontFamily").base,
fontSize: rem(REM._12px),
lineHeight: rem(REM._16px),
},
"section-heading": {
fontFamily: theme("fontFamily").brand,
fontSize: rem(REM._14px),
lineHeight: "175%",
fontWeight: 700,
textTransform: "uppercase",
letterSpacing: "-0.2px",
color: themeColors.onSurfaceVariant,
},
}),
},
plugins: [
// custom typography classes
generators.text,
// custom border width classes (width default solid style)
generators.borderWidth,
// custom border style classes, must be after border width plugin
generators.borderStyle,
// Semantic colors (handling hover/press color states)
generators.getSemanticColorGenerator({
type: "semanticStateColor",
classPrefix: "state",
cssProperty: CSS_VAR_STATE_INTERACTIVE_COLOR,
additionalRules: {
interactive: {
"background-image": `linear-gradient(var(${CSS_VAR_STATE_INTERACTIVE_COLOR}), var(${CSS_VAR_STATE_INTERACTIVE_COLOR}))`,
},
},
}),
],
});
getCobaltTailwindcssConfig_1 = getCobaltTailwindcssConfig;
return getCobaltTailwindcssConfig_1;
}
export { requireGetCobaltTailwindcssConfig as __require };
//# sourceMappingURL=getCobaltTailwindcssConfig2.js.map