@xoopah-designsystem/ds

Company-wide design system SCSS package. Figma-aligned tokens (colors, spacing, typography), mixins, typography utilities, and component styles (buttons, cards, form fields, etc.). Override variables to theme.

Install

npm install @xoopah-designsystem/ds

Usage

Full design system (tokens + typography + component/utility classes)

Import once in your app (e.g. styles.scss or angular.json styles):

@import '@xoopah-designsystem/ds/scss/design-system';

Core only (tokens + mixins + typography, no component classes)

@import '@xoopah-designsystem/ds/scss/design-system-core';

Theming (override before import)

Override variables before importing. All token variables use !default.

// your-app/theme-overrides.scss
$color-brand-500: #your-brand;
$type-font-family-primary: 'Your Font', sans-serif;

@import '@xoopah-designsystem/ds/scss/design-system';

Package contents

| Path | Description | |------|-------------| | scss/design-system.scss | Full entry: variables, mixins, typography, mapped (component + utility classes) | | scss/design-system-core.scss | Variables, mixins, typography only | | scss/variables/ | Colors, typography, spacing tokens | | scss/mixins/ | Responsive, scrollbar, px-to-rem, etc. | | scss/typography/ | Heading/body/utility classes | | scss/mapped/ | Component styles: buttons, cards, form fields, Material overrides, icons, chips, alerts, etc. | | components/ | Component reference (class names and usage) |

Components and their SCSS

All component styles live in scss/mapped/_index.scss (included when you import design-system.scss). Main CSS classes:

• Buttons: .button, .button-primary-default-fill, .button-secondary-*, .button-error-*, .button-link-*, .button-tertiary-*, .md-button, .sm-button
• Cards: .cards, .goal-card
• Form: .form-field-wrapper, Material form field overrides
• Controls: .mat-mdc-checkbox, .mat-mdc-radio-button, .mat-tooltip, switch, calendar, select/autocomplete panels
• Feedback: Alerts, snackbar, status pills (.status-pills), chips
• Layout: .d-flex, .w-100, padding/margin utilities (.p-1, .mx-2, etc.), grid (.col-span-*)
• Icons: .icon-icon-* (neutral, brand, success, error, etc.)

See components/README.md in this package for a full list of component class names and usage.

Angular

Use the design system in Angular by adding the main SCSS to angular.json:

"styles": [
  "node_modules/@xoopah-designsystem/ds/scss/design-system.scss",
  "src/styles.scss"
]

Or in src/styles.scss:

@import '@xoopah-designsystem/ds/scss/design-system';

Publishing to npm

Public publish

Steps to publish the package to the public npm registry:

1. Log in to npm

npm login

Enter your username, password, and OTP if 2FA is enabled. Create an account at npmjs.com if you don't have one.

2. Scope / org

Package name is @xoopah-designsystem/ds (org: xoopah-designsystem). To publish as public:

• Create an npm org at npmjs.com/org/create (e.g. xoopah-designsystem) and publish under it, or
• To publish under your personal account, use a scoped name like @your-username/design-system-scss.

3. Publish from the package folder

Add "publishConfig": { "access": "public" } to package.json for public access (scoped packages are private by default). Then:

cd packages/xoopah-design-system-scss
npm publish

With 2FA enabled, use a one-time password:

npm publish --otp=YOUR_6_DIGIT_CODE

4. Version updates (future releases)

Bump the version for each release, then publish:

npm version patch   # 1.0.0 → 1.0.1
# or
npm version minor   # 1.0.0 → 1.1.0
npm publish

Private registry (Azure, GitHub, company)

If your company uses a private npm registry (e.g. Azure Artifacts, GitHub Packages):

• Set the registry URL in the project’s .npmrc.
• Use the same publish command: npm publish (it will use the registry configured in .npmrc).

License

UNLICENSED