@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
407 lines (395 loc) • 12.2 kB
JavaScript
import require$$0 from 'tailwindcss/defaultTheme';
import require$$1 from '../src/tokens/breakpoints.js';
import require$$2 from '../src/tokens/colors.js';
import require$$3 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 legacyColors = require$$2;
const zIndexes = require$$3;
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 {
stroke: borderColors,
background: bgColors,
fill: fillColors,
text: textColors,
} = getColorsUsingCSSVariables({
additionalColors: { transparent: "transparent" },
});
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,
// SVG color
stroke: false,
fill: 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: {
...legacyColors, // deprecated
current: "currentColor",
},
semanticStateColor: {
interactive: {
DEFAULT: "#00000000",
hover: "#00000005",
press: "#0000000F",
},
onDrag: "#00000029",
none: {
DEFAULT: "transparent",
hover: "transparent",
press: "transparent",
},
},
semanticBorderColor: borderColors,
semanticBackgroundColor: {
...bgColors,
...{ fill: fillColors },
},
semanticFillColor: fillColors,
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)",
},
semanticTextColor: textColors,
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 }) => ({
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: theme("semanticTextColor").subdued,
},
}),
},
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: "semanticTextColor",
classPrefix: "text",
cssProperty: "color",
}),
generators.getSemanticColorGenerator({
type: "semanticTextColor",
classPrefix: "placeholder",
selectorSuffix: "::placeholder",
cssProperty: "color",
enableInteractiveColors: false,
}),
generators.getSemanticColorGenerator({
type: "semanticTextColor",
classPrefix: "placeholder",
selectorSuffix: "::-moz-placeholder",
cssProperty: "color",
enableInteractiveColors: false,
}),
generators.getSemanticColorGenerator({
type: "semanticBackgroundColor",
classPrefix: "bg",
cssProperty: "background-color",
}),
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}))`,
},
},
}),
generators.getSemanticColorGenerator({
type: "semanticFillColor",
classPrefix: "accent",
cssProperty: "accent-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border",
cssProperty: "border-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-t",
cssProperty: "border-top-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-b",
cssProperty: "border-bottom-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-l",
cssProperty: "border-left-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-r",
cssProperty: "border-right-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-e",
cssProperty: "border-inline-end-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-s",
cssProperty: "border-inline-start-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-y",
cssProperty: "border-top",
cssProperty2: "border-bottom",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "border-x",
cssProperty: "border-left",
cssProperty2: "border-right",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "divide",
cssProperty: "border-color",
selectorSuffix: " > :not([hidden]) ~ :not([hidden])",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "outline",
cssProperty: "outline-color",
}),
generators.getSemanticColorGenerator({
type: "semanticBorderColor",
classPrefix: "ring",
cssProperty: "--tw-ring-color",
}),
],
});
getCobaltTailwindcssConfig_1 = getCobaltTailwindcssConfig;
return getCobaltTailwindcssConfig_1;
}
export { requireGetCobaltTailwindcssConfig as __require };
//# sourceMappingURL=getCobaltTailwindcssConfig2.js.map