TDC Erhverv sass utils
Import sass-utils as scss partials to leverage and ensure consistency in styling of your Erhverv product website. Refer to https://wiki.tdc.dk/display/SE/Styling+guidelines and (link will come soon) for when and how to use them.
Adding new colors and icons
- ensure your icons & colors are added to the correct Figma pages (see /enums/source.enum.ts)
- save and publish in Figma
- run
npm run generate-all
- only new svgs + icons.ts should see updates if any new icons (inside /dist/)
- only colors-design-token.scss should be seen as update if any new colors (inside /dist/)
- new branch, commit, push, pull-request & merge
Contents
- mixins - can be importend separately
- normalize - must be imported separately
- design-tokens imports
- typography - import and use as css-modules in react. Current font-families:
- Roboto - default
- TDC - fallback 1, mainly used in and
- sans-serif - fallback 2
Usage
-
Install via
npm i @tdcerhverv/sass-utils
;
NOTE: Please pay attention topeerDependencies
warnings and make sure you have the right major version. -
Either:
A) Import shared styles (UX signed off design rules translated to variables & mappers) + all utils into your bundler:@import '~@tdcerhverv/sass-utils/_tdc-core';
OR
B) Import only utils into your bundler:@import '~@tdcerhverv/sass-utils/_util';
-
Optional Import nomalize styling.
@import '~@tdcerhverv/sass-utils/_normalize';
Typography
Import into typescript file.
import typography from '@tdcerhverv/sass-utils/typography.scss';
Optional combine with component styling.
const cn = classnames.bind({
...componentStyles,
...typography,
});
Use cn
to trigger classes the easy way.
function Component({
children,
weight,
align,
uppercase,
emphasis,
underline,
}): {
children?: ReactNode;
weight?: 'thin' | 'regular' | 'strong';
align?: 'left' | 'center' | 'right' | 'justify';
uppercase?: boolean;
emphasis?: boolean;
underline?: boolean;
} {
return (
<p
className={cn(
{
[weight]: Boolean(weight),
[align]: Boolean(align),
uppercase,
emphasis,
underline,
}
)}
>
{children}
</p>
);
}
Dev
Published to: https://www.npmjs.com/package/@tdcerhverv/sass-utils
Repository: https://bitbucket.tdc.dk/projects/DB/repos/tdc-packages
Development: SCSS