@tdcerhverv/sass-utils

2.0.3 • Public • Published

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

  1. Install via npm i @tdcerhverv/sass-utils;
    NOTE: Please pay attention to peerDependencies warnings and make sure you have the right major version.

  2. 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';
    
  3. 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

Package Sidebar

Install

npm i @tdcerhverv/sass-utils

Weekly Downloads

2

Version

2.0.3

License

Apache-2.0

Unpacked Size

20.6 kB

Total Files

10

Last publish

Collaborators

  • antongb
  • dev_jonas
  • jeppebenjaminsen
  • ahhah
  • abdok
  • mikkv
  • clausr1990
  • tdc-sigbe
  • mdige
  • nuudaybot
  • tdc-olila
  • jeroen.dk.nl
  • renand
  • stegr
  • m84100
  • m92212
  • m87979
  • vertic
  • rasladev
  • muddz
  • tajsonik
  • linnt
  • molg