@xoopah-designsystem/design-system-scss 1.0.0

package/README.md

@@ -0,0 +1,133 @@
+# @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
+
+```bash
+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):
+
+```scss
+@import '@xoopah-designsystem/design-system-scss/scss/design-system';
+```
+
+### Core only (tokens + mixins + typography, no component classes)
+
+```scss
+@import '@xoopah-designsystem/design-system-scss/scss/design-system-core';
+```
+
+### Theming (override before import)
+
+Override variables **before** importing. All token variables use `!default`.
+
+```scss
+// 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`). 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`:
+
+```json
+"styles": [
+  "node_modules/@xoopah-designsystem/design-system-scss/scss/design-system.scss",
+  "src/styles.scss"
+]
+```
+
+Or in `src/styles.scss`:
+
+```scss
+@import '@xoopah-designsystem/design-system-scss/scss/design-system';
+```
+
+## Publishing (npm public)
+
+Package ko **public npm** par publish karne ke steps:
+
+### 1. npm par login
+
+```bash
+npm login
+```
+
+Username, password, aur (agar 2FA on hai) OTP daalo. Agar abhi npm account nahi hai to [npmjs.com](https://www.npmjs.com/signup) se banao.
+
+### 2. Scope / org check
+
+Package name `@xoopah-designsystem/design-system-scss` (org: xoopah-designsystem). Public publish ke liye:
+- Ya to **npm org** `xoopah` banao aur usme add karo, ya
+- Apne npm user ke under publish karna ho to package name change karo (e.g. `@your-username/design-system-scss`).
+
+Org banana: [npmjs.com/org/create](https://www.npmjs.com/org/create) → org name `xoopah` (agar available ho).
+
+### 3. Package folder se publish
+
+```bash
+cd packages/xoopah-design-system-scss
+npm publish
+```
+
+`package.json` mein `"publishConfig": { "access": "public" }` add hai, isliye ye package **public** publish hoga (scoped packages by default private hote hain).
+
+### 4. Version update (next time)
+
+Har nayi release pe version badhao, phir publish:
+
+```bash
+npm version patch   # 1.0.0 → 1.0.1
+# ya
+npm version minor   # 1.0.0 → 1.1.0
+npm publish
+```
+
+### Private registry (Azure / GitHub / company)
+
+Agar company **private npm registry** use karti hai (Azure Artifacts, GitHub Packages, etc.):
+
+- Us project ke `.npmrc` mein registry URL set karo.
+- Publish command same: `npm publish` (registry wahi use hoga jahan `.npmrc` point karega).
+
+---
+
+## License
+
+UNLICENSED

package/components/README.md

@@ -0,0 +1,62 @@
+# Design system components
+
+Component **styles** are provided by the SCSS in this package. When you import `@xoopah-designsystem/design-system-scss/scss/design-system`, you get all tokens, typography, and the **mapped** component/utility classes below.
+
+Use these **CSS classes** in your HTML/Angular templates. There are no separate Angular components in this package; the design system is SCSS + class names.
+
+## Buttons
+
+| Class | Use |
+|-------|-----|
+| `.button` | Base button (use with variant classes) |
+| `.button-primary-default-fill` | Primary filled |
+| `.button-primary-hover-fill`, `.button-primary-pressed-fill` | Primary states |
+| `.button-secondary-default-fill`, `.button-secondary-hover-fill`, `.button-secondary-pressed-fill` | Secondary |
+| `.button-error-default-fill`, `.button-error-hover-fill`, `.button-error-pressed-fill` | Error/danger |
+| `.button-link-default`, `.button-link-hover`, `.button-link-pressed` | Link style |
+| `.button-tertiary-*` | Tertiary |
+| `.button-warning-default-fill` | Warning |
+| `.button-primary-text` | Text-only primary |
+| `.button-disabled-fill` | Disabled state |
+| `.md-button`, `.sm-button` | Size variants |
+| `.btn-loader` | Loading spinner on button |
+
+## Cards
+
+- `.cards` – standard card container
+- `.goal-card` – goal-style card
+
+## Form & inputs
+
+- `.form-field-wrapper` – wrap Material form fields for design system look
+- Material overrides for input fill, border, hover, disabled (via CSS variables in `:root`)
+
+## Controls
+
+- `.mat-mdc-checkbox` – checkbox styling
+- `.mat-mdc-radio-button` – radio styling
+- `.mat-tooltip` – tooltip styling
+- Switch, calendar (`.mat-calendar-body-*`), select (`.mat-mdc-select-panel`), autocomplete (`.mat-mdc-autocomplete-panel`)
+
+## Feedback & status
+
+- `.status-pills` – status pill chips
+- Alert/snackbar styles
+- Chips (suggestion, input, ad status)
+
+## Icons
+
+- `.icon-icon-neutral-strong`, `.icon-icon-neutral-weak`, `.icon-icon-brand`, `.icon-icon-success`, `.icon-icon-error`, `.icon-icon-warning`, `.icon-icon-white`, `.icon-icon-disabled`
+- `.main-icon`, `.main-icon-16px`, `.main-icon-20px` (sizes)
+
+## Layout & utilities
+
+- Flex: `.d-flex`, `.flex-1`, `.flex-column`, `.align-items-center`, `.justify-content-center`, etc.
+- Grid: `.d-grid`, `.col-span-1` … `.col-span-6`
+- Width/height: `.w-100`, `.w-50`, `.h-100`
+- Spacing: `.p-1`, `.p-2`, `.px-0`, `.py-2`, `.m-*`, `.mb-*`, `.mt-*`, etc.
+- Other: `.cursor-pointer`, `.d-none`, `.text-center`, `.position-relative`, `.hide`
+
+## Theming
+
+CSS variables are set on `:root` and `[data-theme='dark']`. Override SCSS variables before importing the design system to change the generated token values.

package/package.json

@@ -0,0 +1 @@
+{"name":"@xoopah-designsystem/design-system-scss","version":"1.0.0","description":"Company-wide design system SCSS package. Figma-aligned tokens (colors, spacing, typography) and component styles. Override variables to theme.","style":"scss/design-system.scss","main":"scss/design-system.scss","files":["scss","components","README.md"],"keywords":["design-system","scss","figma","tokens","angular"],"author":"","license":"UNLICENSED","repository":{"type":"git","url":""},"publishConfig":{"access":"public"}}

package/scss/design-system-core.scss

@@ -0,0 +1,7 @@
+/// @xoopah-designsystem/design-system-scss (core only)
+/// Tokens + variables + mixins + typography utilities. No component/button/card classes.
+/// Use this if you only want design tokens and typography, and will build your own components.
+
+@import 'variables/index';
+@import 'mixins/index';
+@import 'typography/index';

package/scss/design-system.scss

@@ -0,0 +1,13 @@
+/// @xoopah-designsystem/design-system-scss
+/// Full design system: tokens (CSS variables), typography, mixins, and component/utility classes.
+/// Import this once in your app (e.g. in styles.scss or main.scss).
+/// To override Figma tokens, import your overrides file *before* this file.
+///
+/// Example with overrides:
+///   @import 'your-app/theme-overrides';
+///   @import '@xoopah/design-system-scss/scss/design-system';
+
+@import 'variables/index';
+@import 'mixins/index';
+@import 'typography/index';
+@import 'mapped/index';