@dsco_/common
v1.1.0
Published
Common styles and utilities for DSCO consumers
Downloads
2,309
Keywords
Readme
@dsco_/common
This package contains all DSCO design constants, tokens, and styles. These are made available as SCSS files.
Notes:
- The
@use
Sass feature is only available for Dart Sass. If you are using a different Sass implementation, replace@use
with@import
. Internally, this package uses@import
to maintain compatibility with all Sass implementations. - The import paths below use the "exports" field in
package.json
, which is a feature only available to Webpack 5+ consumers. If you use Webpack 4 or below, you should import this package as@dsco_/common
(which corresponds to the "main" field inpackage.json
), or point to a specific file in the package (e.g.,@dsco_/common/styles/_tokens.scss
).
mixins
Common mixins.
Let's say this export defines a font-regular
mixin. Example usage:
@use '@dsco_/common/mixins';
.text {
@include mixins.font-regular;
}
styles
Common utility classes. All classes should be prefaced with dsco-
for namespacing and consistency.
Let's say this export defines a dsco-text
class. Example usages:
SCSS
// text.module.scss
@use '@dsco_/common/styles';
.text {
@extend .dsco-text;
// additional styles
}
JavaScript
// Text.jsx
import '@dsco_/common/styles';
export default function Text({text}) {
return <p className="dsco-text">{text}</p>;
}
tokens
A set of SCSS variables that serve as design tokens for DSCO. These constants should be prefaced with dsco-
for namespacing and consistency.
Example usage:
// @dsco_/common/tokens
$dsco-text-color: purple;
// text.module.scss
@use '@dsco_/common/tokens';
.text {
color: tokens.$dsco-text-color;
}