@xoopah-designsystem/design-system-scss

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/design-system-scss

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/design-system-scss/scss/design-system';

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

@import '@xoopah-designsystem/design-system-scss/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/design-system-scss/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). Below are the main class groups. See components/README.md for more (cards, form, layout, spacing).

Buttons (all classes)

Use on <button>; put label in <span class="body-md font-weight-regular">Label</span>.

| Class | Use | |-------|-----| | .button | Base (required on every button) | | .button-primary-default-fill | Primary filled | | .button-primary-hover-fill | Primary hover state | | .button-primary-pressed-pressed-fill | Primary pressed | | .button-secondary-default-fill | Secondary filled | | .button-secondary-hover-fill | Secondary hover | | .button-secondary-pressed-fill | Secondary pressed | | .button-error-default-fill | Error/danger filled | | .button-error-hover-fill | Error hover | | .button-error-pressed-fill | Error pressed | | .button-link-default | Link style (transparent) | | .button-link-hover | Link hover | | .button-link-pressed | Link pressed | | .button-tertiary-hover-fill | Tertiary hover | | .button-tertiary-pressed-fill | Tertiary pressed | | .button-warning-default-fill | Warning filled | | .button-primary-text | Text-only primary | | .button-disabled-fill | Disabled state | | .md-button | Medium size | | .sm-button | Small size | | .btn-loader | Loading spinner |

Text colors (text-text-*)

Use for text (paragraphs, labels, spans).

| Class | Use | |-------|-----| | .text-text-neutral-strong | Strong/default text | | .text-text-neutral-weak | Muted text | | .text-text-neutral-tertiary | Tertiary muted | | .text-text-placeholder | Placeholder style | | .text-text-error | Error text | | .text-text-warning | Warning text | | .text-text-disabled | Disabled text | | .text-text-success | Success text | | .text-text-white | White text | | .text-text-link | Link color | | .text-text-black | Black text | | .text-text-brand | Brand color text |

Icon colors (icon-icon-*)

Use on icon elements (e.g. <i-tabler>, <span>, SVG). Add .filled if the icon is filled.

| Class | Use | |-------|-----| | .icon-icon-neutral-strong | Default icon | | .icon-icon-neutral-weak | Muted icon | | .icon-icon-success | Success | | .icon-icon-error | Error | | .icon-icon-warning | Warning | | .icon-icon-disabled | Disabled | | .icon-icon-brand | Brand color | | .icon-icon-white | White (e.g. on dark buttons) |

Icon sizes: .main-icon, .main-icon-16px, .main-icon-20px

Typography

| Class | Use | |-------|-----| | .body-xsm, .body-sm, .body-md, .body-lg | Body text sizes | | .heading-h1 … .heading-h6 | Headings | | .font-weight-light, .font-weight-regular, .font-weight-medium, .font-weight-semibold | Weight |

Other

• Cards: .cards, .goal-card
• Form: .form-field-wrapper
• Layout: .d-flex, .flex-1, .align-items-center, .justify-content-center, .w-100, .d-grid, .col-span-1 … .col-span-6
• Spacing: .p-1, .p-2, .px-0, .py-2, .m-*, .mb-*, .mt-*, etc.
• Border radius: .border-radius-sm, .border-radius-md, .border-radius-lg
• Controls: .mat-mdc-checkbox, .mat-mdc-radio-button, .mat-tooltip; status pills: .status-pills

Using in another Angular project

Step 1: Install the package

In your Angular project folder:

npm install @xoopah-designsystem/design-system-scss

Step 2: Load the design system styles (pick one)

Option A – in angular.json (recommended; load once for the whole app)

In your project's angular.json, find the "styles" array and add the design system before your app styles:

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

Option B – in src/styles.scss

At the top of src/styles.scss:

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

Step 3: Use the classes in your templates

After the styles are loaded, use the design system CSS classes in your components’ HTML. You don’t import anything in the component; the classes are global.

Example – button:

Put the label inside a <span> and add typography classes (e.g. body-md, font-weight-regular). You can also add icons inside the button.

<button class="button button-primary-default-fill md-button">
  <span class="body-md font-weight-regular">Save</span>
</button>

With icon (left + text + optional right icon):

<button class="button button-primary-default-fill md-button">
  <i-tabler name="arrow-up" class="main-icon icon-icon-white"></i-tabler>
  <span class="body-md font-weight-regular">Save</span>
</button>

Example – layout and card:

<div class="d-flex align-items-center gap-2">
  <div class="cards p-2">Card content</div>
</div>

Example – typography:

<h1 class="heading-h1">Title</h1>
<p class="body-md">Body text</p>

Full list of component classes: see components/README.md in the package (or in node_modules/@xoopah-designsystem/design-system-scss/components/README.md).

Changing colors and font family

Design system variables use !default, so define your overrides first, then import the design system. Order matters.

Option 1: Override in src/styles.scss

At the top of src/styles.scss (before the design system import):

// ---------- Your theme overrides ----------
// Font family (used everywhere: headings, body, buttons, etc.)
$type-font-family-primary: 'Inter', sans-serif;
// Or: 'Poppins', 'Roboto', 'Open Sans', etc.

// Brand colors (buttons, links, primary UI)
$color-brand-500: #2563eb;
$color-brand-600: #1d4ed8;
$color-brand-700: #1e40af;

// Optional: change neutrals, success, error, warning
// $color-neutral-900: #0f172a;
// $color-success-500: #22c55e;
// $color-error-500: #ef4444;

// ---------- Then load the design system ----------
@import '@xoopah-designsystem/design-system-scss/scss/design-system';

Option 2: Separate theme file (e.g. src/theme-overrides.scss)

Create src/theme-overrides.scss:

// Font
$type-font-family-primary: 'Inter', sans-serif;

// Brand colors
$color-brand-50: #eff6ff;
$color-brand-500: #2563eb;
$color-brand-600: #1d4ed8;
$color-brand-700: #1e40af;

In angular.json, put the theme file before the design system:

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

All color variables (copy and override)

Every color variable with its default value. Override only the ones you need; define them before importing the design system.

Base palette:

$color-blue-50: rgba(245, 250, 254, 1);
$color-blue-100: rgba(231, 242, 254, 1);
$color-blue-200: rgba(198, 224, 251, 1);
$color-blue-300: rgba(149, 194, 249, 1);
$color-blue-400: rgba(111, 172, 246, 1);
$color-blue-500: rgba(68, 133, 244, 1);
$color-blue-600: rgba(37, 109, 242, 1);
$color-blue-700: rgba(11, 78, 192, 1);
$color-blue-800: rgba(7, 45, 111, 1);
$color-blue-900: rgba(1, 9, 21, 1);

$color-grey-50: rgba(253, 253, 255, 1);
$color-grey-100: rgba(243, 247, 254, 1);
$color-grey-200: rgba(225, 233, 248, 1);
$color-grey-300: rgba(204, 216, 237, 1);
$color-grey-400: rgba(177, 192, 220, 1);
$color-grey-500: rgba(140, 159, 191, 1);
$color-grey-600: rgba(102, 122, 155, 1);
$color-grey-700: rgba(63, 81, 112, 1);
$color-grey-800: rgba(40, 53, 76, 1);
$color-grey-900: rgba(17, 28, 47, 1);

$color-orange-50: rgba(255, 247, 230, 1);
$color-orange-100: rgba(255, 237, 199, 1);
$color-orange-200: rgba(254, 217, 139, 1);
$color-orange-300: rgba(253, 200, 87, 1);
$color-orange-400: rgba(253, 200, 87, 1);
$color-orange-500: rgba(255, 159, 44, 1);
$color-orange-600: rgba(240, 131, 0, 1);
$color-orange-700: rgba(189, 103, 0, 1);
$color-orange-800: rgba(122, 66, 0, 1);
$color-orange-900: rgba(71, 39, 0, 1);

$color-green-100: rgba(249, 255, 240, 1);
$color-green-200: rgba(239, 254, 205, 1);
$color-green-300: rgba(214, 252, 147, 1);
$color-green-400: rgba(191, 250, 86, 1);
$color-green-500: rgba(167, 237, 44, 1);
$color-green-600: rgba(139, 214, 5, 1);
$color-green-700: rgba(117, 179, 5, 1);
$color-green-800: rgba(81, 124, 3, 1);
$color-green-900: rgba(45, 70, 2, 1);

$color-red-50: rgba(255, 247, 245, 1);
$color-red-100: rgba(255, 247, 245, 1);
$color-red-200: rgba(255, 195, 173, 1);
$color-red-300: rgba(255, 195, 173, 1);
$color-red-400: rgba(255, 141, 92, 1);
$color-red-500: rgba(255, 120, 56, 1);
$color-red-600: rgba(238, 82, 43, 1);
$color-red-700: rgba(208, 52, 17, 1);
$color-red-800: rgba(168, 31, 0, 1);
$color-red-900: rgba(112, 19, 0, 1);

$color-magenta-pink-50: rgba(255, 245, 254, 1);
$color-magenta-pink-100: rgba(255, 229, 253, 1);
$color-magenta-pink-200: rgba(255, 209, 250, 1);
$color-magenta-pink-300: rgba(251, 177, 243, 1);
$color-magenta-pink-400: rgba(255, 139, 243, 1);
$color-magenta-pink-500: rgba(255, 87, 238, 1);
$color-magenta-pink-600: rgba(243, 43, 222, 1);
$color-magenta-pink-700: rgba(214, 0, 192, 1);
$color-magenta-pink-800: rgba(173, 0, 155, 1);
$color-magenta-pink-900: rgba(87, 0, 78, 1);

$color-white: #fff;
$color-black: #000;

Semantic aliases (override these to change brand/neutral/success/error/warning/info):

$color-brand-50: $color-blue-50;
$color-brand-100: $color-blue-100;
$color-brand-200: $color-blue-200;
$color-brand-300: $color-blue-300;
$color-brand-400: $color-blue-400;
$color-brand-500: $color-blue-500;
$color-brand-600: $color-blue-600;
$color-brand-700: $color-blue-700;
$color-brand-800: $color-blue-800;
$color-brand-900: $color-blue-900;

$color-neutral-50: $color-grey-50;
$color-neutral-100: $color-grey-100;
$color-neutral-200: $color-grey-200;
$color-neutral-300: $color-grey-300;
$color-neutral-400: $color-grey-400;
$color-neutral-500: $color-grey-500;
$color-neutral-600: $color-grey-600;
$color-neutral-700: $color-grey-700;
$color-neutral-800: $color-grey-800;
$color-neutral-900: $color-grey-900;
$color-neutral-white: $color-white;
$color-neutral-black: $color-black;

$color-success-100: $color-green-100;
$color-success-200: $color-green-200;
$color-success-300: $color-green-300;
$color-success-400: $color-green-400;
$color-success-500: $color-green-500;
$color-success-600: $color-green-600;
$color-success-700: $color-green-700;
$color-success-800: $color-green-800;
$color-success-900: $color-green-900;

$color-warning-50: $color-orange-50;
$color-warning-100: $color-orange-100;
$color-warning-200: $color-orange-200;
$color-warning-300: $color-orange-300;
$color-warning-400: $color-orange-400;
$color-warning-500: $color-orange-500;
$color-warning-600: $color-orange-600;
$color-warning-700: $color-orange-700;
$color-warning-800: $color-orange-800;
$color-warning-900: $color-orange-900;

$color-error-50: $color-red-50;
$color-error-100: $color-red-100;
$color-error-200: $color-red-200;
$color-error-300: $color-red-300;
$color-error-400: $color-red-400;
$color-error-500: $color-red-500;
$color-error-600: $color-red-600;
$color-error-700: $color-red-700;
$color-error-800: $color-red-800;
$color-error-900: $color-red-900;

$color-information-100: $color-blue-50;
$color-information-200: $color-blue-200;
$color-information-300: $color-blue-300;
$color-information-400: $color-blue-400;
$color-information-500: $color-blue-500;
$color-information-600: $color-blue-600;
$color-information-700: $color-blue-700;
$color-information-800: $color-blue-800;
$color-information-900: $color-blue-900;

Typography:

$type-font-family-primary: 'Lexend', sans-serif;

Example override (only what you need):

// Override brand colors (buttons, links, primary UI)
$color-brand-500: #2563eb;
$color-brand-600: #1d4ed8;
$color-brand-700: #1e40af;

// Override neutrals (text, backgrounds)
$color-neutral-800: #1e293b;
$color-neutral-900: #0f172a;

// Override semantic colors
$color-success-600: #16a34a;
$color-error-600: #dc2626;
$color-warning-500: #f59e0b;

// Override font
$type-font-family-primary: 'Inter', sans-serif;

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

Full variable definitions: node_modules/@xoopah-designsystem/design-system-scss/scss/variables/_colors.scss
Typography variables: scss/variables/_typography.scss

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/design-system-scss (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