@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/themes/README.md

@@ -0,0 +1,443 @@
+# Atomix Design System Themes
+
+# Atomix Design System Themes
+
+This guide documents how to build SCSS-based themes for the Atomix Design System, using the existing `shaj-default` theme as the reference implementation. It covers the architecture, creation process, best practices, testing and validation, and maintenance guidelines. Real code excerpts are taken from `./src/themes/shaj-default` to ensure your new themes align with the established patterns.
+
+## Theme Architecture
+
+- Overview
+  - Themes follow a layered SCSS architecture mirroring Atomix core styles: `01-settings`, `02-tools`, `03-generic`, `04-elements`, `05-objects`, `06-components`, `99-utilities`.
+  - Each theme selectively overrides base tokens, utilities, and component styling while reusing the majority of Atomix core styles.
+
+- File Structure (from `shaj-default`)
+  - `index.scss` — Entrypoint that wires up local overrides and Atomix base layers.
+  - `01-settings/` — Theme tokens and configuration (colors, spacing, breakpoints, fonts, typography, component settings).
+  - `02-tools/` — Optional theme-specific tools; can be empty when only using Atomix tools.
+  - `03-generic/` — Root-level theme overrides (often minimal).
+  - `04-elements/`, `05-objects/` — Rarely overridden; keep consistent unless theme requires element/object-level changes.
+  - `06-components/` — Component overrides specific to the theme’s visual style.
+  - `99-utilities/` — Utility overrides or additions.
+
+- Architecture Diagram
+  ```
+  Theme Entrypoint (index.scss)
+    ├─ 01-settings (forward)  → overrides base tokens
+    ├─ 02-tools    (use/forward) → theme tools (optional)
+    ├─ 03-generic  (forward)  → root/base overrides
+    ├─ 04-elements (forward)  → element-level overrides (rare)
+    ├─ 05-objects  (forward)  → layout/object overrides (rare)
+    ├─ 06-components(forward) → component styling overrides
+    └─ 99-utilities(forward) → utility overrides (optional)
+  
+  Atomix Base Styles (../../styles)
+    ├─ 01-settings → default tokens
+    ├─ 02-tools    → mixins & functions
+    ├─ 03-generic  → resets and root
+    ├─ 04-elements → HTML elements
+    ├─ 05-objects  → layout patterns
+    ├─ 06-components → components
+    └─ 99-utilities → utility classes
+  ```
+
+- Entrypoint Example (from `shaj-default/index.scss`)
+  ```scss
+  // Import and forward local theme settings first (these override base settings)
+  @use '01-settings/index' as *;
+
+  // Import and forward base styles with local overrides
+  @use '02-tools/index' as *;
+  @use '../../styles/02-tools/index' as tools;
+
+  @use '03-generic/index' as *;
+  @use '../../styles/03-generic/index' as generic;
+
+  @use '04-elements/index' as *;
+  @use '../../styles/04-elements/index' as elements;
+
+  @use '05-objects/index' as *;
+  @use '../../styles/05-objects/index' as objects;
+
+  @use '06-components/index' as *;
+  @use '../../styles/06-components/index';
+
+  @use '99-utilities/index' as *;
+  @use '../../styles/99-utilities/index' as utilities;
+  ```
+
+- Core SCSS Files and Purpose
+  - `01-settings/_settings.config.scss`: global theme config, including `$prefix` to namespace CSS variables.
+    ```scss
+    // These variables must act as constants, hence the uppercase
+    $ENV: 'dev';
+    $prefix: atomix- !default; // used as var(--#{$prefix}token)
+    ```
+  - `01-settings/_settings.colors.scss`: overrides Atomix color tokens by providing a 1–10 scale for each palette.
+    ```scss
+    @use '../../../styles/01-settings/settings.colors' with (
+      $primary-6: #0ea5e9,
+      $primary-7: #0284c7,
+      $primary-8: #0369a1,
+      $gray-1: #f9fafb,
+      $gray-10: #111827,
+      // ... full 1–10 scales per color
+    );
+    ```
+  - `01-settings/_settings.typography.scss`: font families, weights, sizes, line-heights, letter spacing.
+    ```scss
+    @use '../../../styles/01-settings/settings.typography' with (
+      $font-family-base: (system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif),
+      $font-weight-normal: 400,
+      $h1-font-size: 2.75rem,
+      $line-height-base: 1.6,
+      $headings-font-weight: 600,
+      // ...
+    );
+    ```
+  - `01-settings/_settings.spacing.scss`: spacing scale tied to `px` values.
+    ```scss
+    $spacer: 16px !default;
+    $spacing-sizes: (
+      0: 0px, 1: 4px, 2: 8px, 3: 12px,
+      4: 16px, 5: 20px, 6: 24px, 8: 32px,
+      10: 40px, 12: 48px, 16: 64px, 20: 80px,
+      // ...
+    ) !default;
+    ```
+  - `01-settings/_settings.breakpoints.scss`: breakpoint map and explicit variables.
+    ```scss
+    $breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) !default;
+    $breakpoint-sm: 576px !default; // also provided individually
+    ```
+  - `01-settings/_settings.fonts.scss`: font imports and loading strategy.
+    ```scss
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+    $font-display: swap !default;
+    ```
+  - `06-components/*`: component-specific overrides using theme CSS variables.
+    ```scss
+    // Button example
+    @use '../01-settings/settings.config' as *;
+    .c-btn.c-btn-primary {
+      background: linear-gradient(135deg, var(--#{$prefix}primary-6), var(--#{$prefix}primary-7));
+      border-color: var(--#{$prefix}primary-6);
+    }
+    ```
+
+- Variable Naming Conventions and Organization
+  - SCSS variables: lowercase with hyphenation (e.g., `$primary-6`, `$line-height-base`).
+  - Constant-like config: uppercase for special cases (e.g., `$ENV`).
+  - CSS variables: namespaced with `$prefix`, used as `var(--#{$prefix}token-name)` throughout components to enable runtime theming.
+  - Color scales: 1–10 per palette for predictable gradations.
+
+- Mixins and Function Implementations
+  - Atomix provides color utilities and general tools you can reuse; theme overrides are optional.
+  - Color utilities (from base tools):
+    ```scss
+    // _tools.color-functions.scss
+    @function tint-color($color, $weight) { /* mix with white */ }
+    @function shade-color($color, $weight) { /* mix with black */ }
+    @function shift-color($color, $weight) { /* tint if >0, else shade */ }
+    @function to-rgb($color) { /* returns "r, g, b" or passthrough */ }
+    ```
+  - Media, spacing, and utility tools are exposed via `@use '../../styles/02-tools/index' as tools;` and can be applied in components.
+
+## Theme Creation Process
+
+- Step-by-Step Guide
+  1. Create a new theme folder: `./src/themes/<your-theme>/`.
+  2. Add `index.scss` that forwards local settings first, then uses Atomix base layers:
+     ```scss
+     @use '01-settings/index' as *;
+     @use '02-tools/index' as *;
+     @use '../../styles/02-tools/index' as tools;
+     @use '03-generic/index' as *;
+     @use '../../styles/03-generic/index' as generic;
+     @use '04-elements/index' as *;
+     @use '../../styles/04-elements/index' as elements;
+     @use '05-objects/index' as *;
+     @use '../../styles/05-objects/index' as objects;
+     @use '06-components/index' as *;
+     @use '../../styles/06-components/index';
+     @use '99-utilities/index' as *;
+     @use '../../styles/99-utilities/index' as utilities;
+     ```
+  3. Implement `01-settings/_index.scss` and forward needed settings files. Start with colors and config, then add typography, spacing, breakpoints, and any component settings.
+  4. Optionally add `02-tools` overrides (often empty if relying on Atomix tools).
+  5. Add component overrides under `06-components` as needed to express your unique design.
+  6. Keep `03-generic`, `04-elements`, `05-objects`, and `99-utilities` minimal unless your theme needs specific overrides at those layers.
+
+- Required Base Variables and Defaults
+  - `$prefix`: CSS variable namespace (default: `atomix-`).
+  - Colors: provide complete 1–10 scales for `primary`, `red`, `green`, `yellow`, `blue`, and `gray`. Use `shaj-default` values as a starting point.
+  - Typography: families, weights (300–900), base and heading sizes, line heights, letter spacing.
+  - Spacing: maintain the Atomix scale (e.g., `$spacer: 16px` and `$spacing-sizes` map) for consistency.
+  - Breakpoints: keep standard responsive sizes (xs–xxl) to ensure layout fidelity.
+
+- Color Palette Definition Methodology
+  - Define each color scale from 1 (lightest) to 10 (darkest) with accessible contrast.
+  - Prefer balanced hues aligned with UI affordances: primary for action, gray for surfaces, red/green for state.
+  - Use CSS variables in components: `var(--#{$prefix}primary-6)` for runtime theme flexibility.
+
+- Typography System Implementation
+  - Use performant system fonts by default (as in `shaj-default`).
+  - Scale headings more pronounced than body text; ensure `line-height-base` ≥ 1.5 for readability.
+  - Adjust letter spacing for large headings to improve optical balance.
+
+- Spacing and Layout Rules
+  - Adopt the Atomix spacing map to guarantee consistent padding/margins across components.
+  - Leverage base grid and breakpoint tools from `../../styles/02-tools` for responsive behaviors.
+
+- Component-Specific Styling Patterns
+  - Buttons: use gradients or solid fills with hover transitions; reference `primary-*` variables.
+    ```scss
+    .c-btn.c-btn-primary { background: linear-gradient(135deg, var(--#{$prefix}primary-6), var(--#{$prefix}primary-7)); }
+    ```
+  - Inputs: emphasize focus states with subtle shadows and color borders; include valid/invalid states.
+    ```scss
+    .c-form-control:focus { border-color: var(--#{$prefix}primary-6); box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }
+    ```
+  - Cards: use surface and border tokens with hover elevation.
+    ```scss
+    .c-card { border: 1px solid var(--#{$prefix}gray-2); &:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); } }
+    ```
+
+## Best Practices
+
+- SCSS Organization Strategies
+  - Mirror Atomix’s layered architecture; keep overrides local to the appropriate layer.
+  - Forward settings via `01-settings/_index.scss` using `@forward` to keep entry imports clean.
+  - Minimize changes in `03-generic`, `04-elements`, and `05-objects` unless necessary.
+
+- Variable Inheritance Patterns
+  - Override base tokens using `@use '...settings.*' with (...)` to keep diffs scoped.
+  - Namespace CSS variables via `$prefix`, and access them in components using `var(--#{$prefix}...)`.
+  - Prefer CSS variables in component styles to allow runtime theming.
+
+- Theme Extension Techniques
+  - Start from `shaj-default` and incrementally override only what you need.
+  - Add component overrides under `06-components` to layer theme-specific visuals without diverging from core semantics.
+  - Reuse Atomix tools (`../../styles/02-tools`) for consistency and performance.
+
+- Performance Optimization for Theme SCSS
+  - Avoid deep selector nesting; keep specificity low.
+  - Use transition and shadow values sparingly to reduce paint cost.
+  - Share tokens via CSS variables rather than recomputing values in many places.
+  - Build settings can compress output; see `themes.config.js` for build formats and Sass options.
+
+- Browser Compatibility Considerations
+  - Respect the project `.browserslistrc` for autoprefixing and compatibility.
+  - Provide sensible fallbacks when using advanced features; CSS vars are widely supported but test in IE11-like environments if necessary (polyfills typically out of scope).
+
+## Testing and Validation
+
+- Visual Regression Testing Procedures
+  - Use Storybook stories for themed components; compare snapshots across theme changes.
+  - Consider integrating Chromatic or a screenshot diff tool to catch regressions.
+
+- Theme Consistency Checks
+  - Verify all components read tokens from CSS variables (e.g., `var(--#{$prefix}*)`).
+  - Ensure spacing, typography, and color usage comply with your theme’s `01-settings`.
+  - Audit hover/focus states for accessibility and consistency.
+
+- Cross-Browser Testing Requirements
+  - Test Chrome, Safari, Firefox, and Edge at minimum.
+  - Validate responsive behavior at breakpoints (`sm`, `md`, `lg`, `xl`, `xxl`).
+
+- Performance Impact Measurement
+  - Measure CSS bundle size per theme; prefer compressed outputs for production.
+  - Use Lighthouse or performance tooling to evaluate paint, layout shifts, and interaction latency.
+
+## Maintenance Guidelines
+
+- Theme Versioning Strategy
+  - Track theme versions in `themes.config.js` metadata and follow SemVer (MAJOR.MINOR.PATCH).
+  - Bump versions when changing tokens or component visuals in backward-incompatible ways.
+
+- Update and Deprecation Policies
+  - Document breaking changes in `CHANGELOG.md` and migration notes.
+  - Deprecate tokens or patterns gradually; provide an alias or fallback period.
+
+- Documentation Standards for New Themes
+  - Include an overview of your theme’s goals, palette, typography, and component deltas.
+  - Add code snippets for critical overrides and an architecture diagram.
+
+- Contribution Guidelines for Theme Development
+  - Follow repository `CONTRIBUTING.md` and maintain consistent code style.
+  - Keep PRs focused: token changes separate from component visual changes whenever possible.
+
+## Practical Examples (from shaj-default)
+
+- Config and Prefix
+  ```scss
+  // 01-settings/_settings.config.scss
+  $ENV: 'dev';
+  $prefix: atomix- !default;
+  ```
+
+- Colors Override with Base Integration
+  ```scss
+  // 01-settings/_settings.colors.scss
+  @use '../../../styles/02-tools/tools.to-rgb' as *;
+  @use '../../../styles/02-tools/tools.color-functions' as *;
+  @use '../../../styles/01-settings/settings.colors' with (
+    $primary-1: #f0f9ff,
+    $primary-6: #0ea5e9,
+    $primary-7: #0284c7,
+    $gray-1: #f9fafb,
+    $gray-10: #111827,
+    // ... full scales per palette
+  );
+  ```
+
+- Typography System
+  ```scss
+  // 01-settings/_settings.typography.scss
+  @use '../../../styles/01-settings/settings.typography' with (
+    $font-family-base: (system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif),
+    $font-size-base: 1rem, // 16px
+    $h1-font-size: 2.75rem,
+    $line-height-base: 1.6,
+    $headings-font-weight: 600,
+  );
+  ```
+
+- Spacing Scale
+  ```scss
+  // 01-settings/_settings.spacing.scss
+  $spacer: 16px !default;
+  $spacing-sizes: (0: 0px, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 6: 24px, 8: 32px, 10: 40px, 12: 48px, 16: 64px, 20: 80px);
+  ```
+
+- Component Overrides (Button)
+  ```scss
+  // 06-components/_components.button.scss
+  @use '../01-settings/settings.config' as *;
+  .c-btn.c-btn-primary {
+    background: linear-gradient(135deg, var(--#{$prefix}primary-6), var(--#{$prefix}primary-7));
+    border-color: var(--#{$prefix}primary-6);
+  }
+  ```
+
+- Component Overrides (Input)
+  ```scss
+  // 06-components/_components.input.scss
+  @use '../01-settings/settings.config' as *;
+  .c-form-control:focus {
+    border-color: var(--#{$prefix}primary-6);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+  }
+  ```
+
+## Theme Registration and Build
+
+- Theme Metadata and Build Settings (`src/themes/themes.config.js`)
+  ```js
+  export const themesConfig = {
+    metadata: {
+      'shaj-default': { name: 'Shaj Default', version: '1.0.0', tags: ['default','light'], supportsDarkMode: true },
+      // add your theme:
+      'my-theme': { name: 'My Theme', version: '0.1.0', tags: ['light'], supportsDarkMode: true }
+    },
+    build: { output: { directory: 'themes', formats: { expanded: '.css', compressed: '.min.css' } }, sass: { style: 'expanded', sourceMap: true, loadPaths: ['src'] } },
+    exports: { './themes/*': './dist/themes/*.css', './themes/*.min': './dist/themes/*.min.css' },
+    integration: { cssVariables: { colorMode: '--storybook-color-mode' }, classNames: { theme: 'data-theme', colorMode: 'data-color-mode' } }
+  };
+  ```
+
+- Suggested Steps to Add a New Theme
+  - Create `src/themes/<my-theme>/` with the layered structure shown above.
+  - Implement tokens in `01-settings` and component overrides in `06-components`.
+  - Add metadata in `themes.config.js` under `metadata` for discoverability.
+  - Include your theme CSS in your app by bundling `index.scss` or using the build output under `dist/themes`.
+
+---
+
+By following the patterns and examples in `shaj-default`, you can create highly consistent, maintainable, and performant themes that integrate seamlessly with Atomix core styles while expressing distinct visual identities.
+
+
+This directory contains all the themes for the Atomix Design System. Each theme is a collection of SCSS files that override or extend the base design system styles.
+
+## Theme Structure
+
+Each theme follows the same structure as the main design system:
+
+```
+theme-name/
+├── 01-settings/
+├── 02-tools/
+├── 03-generic/
+├── 04-elements/
+├── 05-objects/
+├── 06-components/
+├── 99-utilities/
+└── index.scss
+```
+
+## Available Themes
+
+- **shaj-default** - The default theme for Atomix Design System
+- **boomdevs** - A theme by the BoomDevs team
+- **esrar** - A theme by the Esrar team
+- **mashroom** - A theme by the Mashroom team
+- **yabai** - A theme by the Yabai team
+
+## How Themes Work
+
+Themes work by importing and overriding the base design system styles. Each theme's `index.scss` file:
+
+1. Imports local theme settings that override base settings
+2. Imports and forwards base styles with local overrides
+3. Combines theme-specific styles with the base design system
+
+## Building Themes
+
+Themes are automatically built when you run the main build command:
+
+```bash
+npm run build
+```
+
+This generates individual CSS files for each theme in the `dist/themes` directory:
+- Expanded CSS for development
+- Minified CSS for production
+
+You can also build only the themes with:
+
+```bash
+npm run build:themes
+```
+
+## Using Themes
+
+To use a theme in your project, import the corresponding CSS file:
+
+```scss
+// In your SCSS file
+@import '~@shohojdhara/atomix/dist/themes/shaj-default.css';
+```
+
+Or in your JavaScript/TypeScript files:
+
+```js
+// Import the theme CSS
+import '@shohojdhara/atomix/dist/themes/shaj-default.css';
+```
+
+## Creating New Themes
+
+To create a new theme:
+
+1. Create a new directory in `src/themes` with your theme name
+2. Follow the same structure as existing themes
+3. Create an `index.scss` file that imports and overrides base styles
+4. Add your theme to the `themes.variants` array in `build.config.js`
+5. Run the build process to generate the theme CSS files
+
+## Theme Customization
+
+Themes can customize any aspect of the design system by overriding variables, mixins, or component styles in their respective directories. For example, to customize button styles in your theme:
+
+1. Create a `_buttons.scss` file in `themes/your-theme/06-components/`
+2. Override the button styles as needed
+3. Import and forward the file in `themes/your-theme/06-components/_index.scss`

package/src/themes/THEME_CHECKLIST.md

@@ -0,0 +1,74 @@
+# Atomix Theme Checklist
+
+Use this checklist when creating or updating a theme to align with Atomix guidelines (Rollup, Storybook 8, Vitest, ITCSS-like SCSS).
+
+## 1) Structure and Entrypoint
+- [ ] Theme folder under `src/themes/<theme-name>/`
+- [ ] `index.scss` uses ITCSS order and forwards local overrides:
+  ```text
+  // Local settings override base
+  @use '01-settings/index' as *;
+  // Tools
+  @use '02-tools/index' as *;
+  @use '../../styles/02-tools/index' as tools;
+  // Generic
+  @use '03-generic/index' as *;
+  @use '../../styles/03-generic/index' as generic;
+  // Elements
+  @use '04-elements/index' as *;
+  @use '../../styles/04-elements/index' as elements;
+  // Objects
+  @use '05-objects/index' as *;
+  @use '../../styles/05-objects/index' as objects;
+  // Components
+  @use '06-components/index' as *;
+  @use '../../styles/06-components/index';
+  // Utilities
+  @use '99-utilities/index' as *;
+  @use '../../styles/99-utilities/index' as utilities;
+  ```
+- [ ] Exceptions (e.g., namespaced `@use`) are documented in a README inside the theme.
+
+## 2) Tokens and Settings Coverage
+- [ ] Colors: 1–10 scale for primary, neutral (gray), and any accent palettes
+- [ ] settings.config (prefix, env), spacing, breakpoints, typography
+- [ ] Component settings: button, input, card, nav, tabs, tooltip/popover, modal, forms
+- [ ] Prefer `@forward` in `01-settings/_index.scss` to keep `index.scss` clean.
+
+## 3) Theming Conventions
+- [ ] Data attributes/classes:
+  - `data-theme="<theme-name>"` on `body` or `html`
+  - `data-atomix-color-mode="light|dark"` on `html`
+- [ ] BEM-like class naming for components (e.g., `c-button`, `c-accordion`)
+- [ ] Avoid global overrides; prefer component-scoped tokens/utilities.
+
+## 4) Accessibility (A11y)
+- [ ] Contrast: ≥ 4.5:1 normal text, ≥ 3.0:1 large text
+- [ ] Focus visible and keyboard nav clearly styled in both color modes
+- [ ] Form controls: placeholder, helper text meet contrast
+- [ ] Record a11y state in `src/themes/themes.config.js` (`a11y` and `status` fields)
+
+## 5) Performance
+- [ ] Heavy effects (blur/backdrop-filter) are opt-in and scoped
+- [ ] Limit CSS custom properties; group by prefix, keep under ~500 per theme
+- [ ] Avoid duplicate declarations; rely on base utilities where possible
+
+## 6) Build and Distribution
+- [ ] `index.scss` compiles via `yarn build:styles` to `dist/themes/<theme>.css` and `.min.css`
+- [ ] Test import from package: `@shohojdhara/atomix/themes/<theme>.css`
+- [ ] Update `themes.config.js` metadata (name, version, tags, a11y, status)
+
+## 7) Storybook
+- [ ] Theme selectable via toolbar in `.storybook/preview.tsx`
+- [ ] If using custom switcher, read theme list from shared source to avoid drift
+- [ ] Provide a few Storybook stories showcasing theme-specific overrides (Buttons, Cards, Nav, Forms)
+
+## 8) Testing
+- [ ] Add or update minimal visual smoke tests in Storybook (manual)
+- [ ] For unit tests (optional): follow Vitest API (`vi.*`), not Jest
+- [ ] Run: `yarn dev` and validate main components under both color modes
+
+## 9) Documentation
+- [ ] Add theme README with design intent, palette examples, and any exceptions from the standard import pattern
+- [ ] Link to the Themes Guide: `src/themes/README.md`
+

package/src/themes/applemix/01-settings/_index.scss

@@ -0,0 +1,24 @@
+/*!
+ * Applemix Theme Settings Index
+ * Apple Mac OS 2026 Liquid Glass inspired settings
+ */
+
+// Modern Sass module system with namespaced imports
+@use 'settings.config' as config;
+@use 'settings.colors' as colors;
+@use 'settings.typography' as typography;
+@use 'settings.animations' as anim;
+@use 'settings.background' as bg;
+
+// Export all modules for backward compatibility
+@forward 'settings.config';
+@forward 'settings.colors';
+@forward 'settings.typography';
+@forward 'settings.animations';
+@forward 'settings.background';
+
+// Forward core token groups from base theme for proper coverage
+@forward '../../../styles/01-settings/settings.spacing';
+@forward '../../../styles/01-settings/settings.breakpoints';
+@forward '../../../styles/01-settings/settings.border';
+@forward '../../../styles/01-settings/settings.border-radius';

package/src/themes/applemix/01-settings/_settings.background.scss

@@ -0,0 +1,6 @@
+@use '../../../styles/01-settings/settings.background' with (
+  $background-enable-gradient-overlay: false,
+  $background-transparency-enable: true,
+  $background-enable-with-shadow: false,
+  $background-transparency: 0.5
+);

package/src/themes/applemix/01-settings/_settings.colors.scss

@@ -0,0 +1,75 @@
+/*!
+ * Applemix Theme Colors
+ * Apple Mac OS 2026 Liquid Glass inspired color palette
+ * Features transparency, depth, and chromatic effects
+ */
+
+@use 'sass:color';
+@use '../../../styles/02-tools/tools.to-rgb' as *;
+@use '../../../styles/02-tools/tools.color-functions' as *;
+@use '../../../styles/01-settings/settings.colors' with (
+  $white: #ffffff,
+  $black: #000000,
+  $color-contrast-dark: #1d1d1f,
+  $color-contrast-light: #f5f5f7,
+  $red-1: #fff5f5,
+  $red-2: #ffe3e3,
+  $red-3: #ffc9c9,
+  $red-4: #ff9f9f,
+  $red-5: #ff6b6b,
+  $red-6: #ff3b30,
+  $red-7: #d70015,
+  $red-8: #a50000,
+  $red-9: #750000,
+  $red-10: #4a0000,
+  $green-1: #f0fff4,
+  $green-2: #dcfce7,
+  $green-3: #bbf7d0,
+  $green-4: #86efac,
+  $green-5: #4ade80,
+  $green-6: #30d158,
+  $green-7: #28cd41,
+  $green-8: #20a934,
+  $green-9: #198527,
+  $green-10: #12611a,
+  $yellow-1: #fffbf0,
+  $yellow-2: #fff3c4,
+  $yellow-3: #ffe066,
+  $yellow-4: #ffcc02,
+  $yellow-5: #ffb000,
+  $yellow-6: #ff9500,
+  $yellow-7: #ff8c00,
+  $yellow-8: #e67300,
+  $yellow-9: #cc5500,
+  $yellow-10: #b33c00,
+  $blue-1: #f0f8ff,
+  $blue-2: #e1f2ff,
+  $blue-3: #c7e9ff,
+  $blue-4: #9dd7ff,
+  $blue-5: #64c7ff,
+  $blue-6: #007aff,
+  $blue-7: #0056d6,
+  $blue-8: #003d99,
+  $blue-9: #002966,
+  $blue-10: #001a44,
+  $gray-1: #fafafa,
+  $gray-2: #f5f5f7,
+  $gray-3: #e5e5e7,
+  $gray-4: #d1d1d6,
+  $gray-5: #aeaeb2,
+  $gray-6: #8e8e93,
+  $gray-7: #636366,
+  $gray-8: #48484a,
+  $gray-9: #2c2c2e,
+  $gray-10: #1c1c1e,
+  $primary-1: #f0f8ff,
+  $primary-2: #e1f2ff,
+  $primary-3: #c7e9ff,
+  $primary-4: #9dd7ff,
+  $primary-5: #64c7ff,
+  $primary-6: #007aff,
+  $primary-7: #0056d6,
+  $primary-8: #003d99,
+  $primary-9: #002966,
+  $primary-10: #001a44
+);

package/src/themes/applemix/01-settings/_settings.config.scss

@@ -0,0 +1,15 @@
+/*!
+ * Applemix Theme Configuration
+ * Core configuration variables for the Apple-inspired liquid glass theme
+ */
+
+@use '../../../styles/01-settings/settings.config' with (
+  $prefix: 'atomix-'
+);
+// Environment configuration
+$ENV: 'dev';
+
+// CSS variable prefix for theme namespacing
+$theme-name: 'applemix';
+$theme-version: '1.0.0';
+$theme-author: 'Atomix Design System';

package/src/themes/applemix/01-settings/_settings.typography.scss

@@ -0,0 +1,30 @@
+/*!
+ * Applemix Theme Typography
+ * Apple-inspired typography system with modern scaling
+ * Optimized for liquid glass interfaces and readability
+ */
+
+@use '../../../styles/01-settings/settings.typography' with (
+  // Apple-inspired font families
+  $font-family-base: (
+      -apple-system,
+      BlinkMacSystemFont,
+      'SF Pro Display',
+      'SF Pro Text',
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif
+    ),
+  // Apple-style font weights
+  $font-weight-light: 300,
+  $font-weight-normal: 400,
+  $font-weight-medium: 500,
+  $font-weight-semibold: 600,
+  $font-weight-bold: 700,
+  $font-weight-heavy: 800,
+  $font-weight-black: 900,
+  // Base typography settings
+  $font-size-base: 1rem,
+  $line-height-base: 1.47
+);

package/src/themes/applemix/02-tools/_index.scss

@@ -0,0 +1,4 @@
+/*!
+ * Applemix Theme Tools Index
+ * Apple Mac OS 2026 Liquid Glass inspired tools
+ */