@educarehq/solaris-ui 0.1.0 → 0.3.0

package/lib/services/theme/model/solaris-theme.types.d.ts

@@ -0,0 +1,3 @@
+export type SolarisColorScheme = 'light' | 'dark' | 'system';
+export type SolarisDensity = 'compact' | 'comfortable';
+export type SolarisReducedMotionPreference = 'auto' | 'reduce' | 'no-preference';

package/lib/services/theme/provider/provide-solaris-theme.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@angular/core';
+import type { SolarisThemeConfig } from '../model/solaris-theme-config.interface';
+export declare function provideSolarisTheme(config?: SolarisThemeConfig): Provider[];

package/lib/services/theme/service/solaris-theme.service.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class SolarisThemeService {
+    private readonly config;
+    get colorScheme(): string;
+    get density(): string;
+    get reducedMotion(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SolarisThemeService>;
+}

package/lib/services/theme/testing/solaris-theme-testing.provider.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@angular/core';
+import type { SolarisThemeConfig } from '../model/solaris-theme-config.interface';
+export declare function provideSolarisThemeTesting(config?: Partial<SolarisThemeConfig>): Provider[];

package/lib/services/theme/token/solaris-theme.tokens.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import type { SolarisThemeConfig } from '../model/solaris-theme-config.interface';
+export declare const SOLARIS_THEME_CONFIG: InjectionToken<SolarisThemeConfig>;

package/lib/services/translation/index.d.ts

@@ -0,0 +1,8 @@
+export { provideSolarisTranslateTesting } from './testing/solaris-translate-testing.provider';
+export { provideSolarisTranslate } from './provider/provide-solaris-translate';
+export { SolarisTranslateService } from './service/solaris-translate.service';
+export { SolarisTranslatePipe } from './pipe/solaris-translate.pipe';
+export { SOLARIS_TRANSLATE_CONFIG } from './token/solaris-translate.tokens';
+export type { SolarisTranslationMap, SolarisTranslations, SolarisTranslateParams, } from './model/solaris-translation.types';
+export type { SolarisTranslateConfig } from './model/solaris-translate-config.interface';
+export type { SolarisBuiltInLocale, SolarisLocale, } from './model/solaris-locale.types';

package/lib/services/translation/model/solaris-locale.types.d.ts

@@ -0,0 +1,4 @@
+type LiteralUnion<T extends U, U = string> = T | (U & {});
+export type SolarisBuiltInLocale = 'pt-BR' | 'en-US' | 'es' | 'zh' | 'ru' | 'de' | 'fr' | 'ja';
+export type SolarisLocale = LiteralUnion<SolarisBuiltInLocale>;
+export {};

package/lib/services/translation/model/solaris-translate-config.interface.d.ts

@@ -0,0 +1,8 @@
+import type { SolarisTranslations } from './solaris-translation.types';
+import type { SolarisLocale } from './solaris-locale.types';
+export interface SolarisTranslateConfig {
+    locale: SolarisLocale;
+    fallbackLocale: SolarisLocale;
+    translations: SolarisTranslations;
+    useBrowserLocale?: boolean;
+}

package/lib/services/translation/model/solaris-translate-defaults.d.ts

@@ -0,0 +1,2 @@
+import type { SolarisTranslateConfig } from './solaris-translate-config.interface';
+export declare const SOLARIS_TRANSLATE_DEFAULT_CONFIG: SolarisTranslateConfig;

package/lib/services/translation/model/solaris-translation.types.d.ts

@@ -0,0 +1,3 @@
+export type SolarisTranslateParams = Record<string, string | number | boolean>;
+export type SolarisTranslations = Record<string, SolarisTranslationMap>;
+export type SolarisTranslationMap = Record<string, string>;

package/lib/services/translation/pipe/solaris-translate.pipe.d.ts

@@ -0,0 +1,8 @@
+import { type PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SolarisTranslatePipe implements PipeTransform {
+    private readonly translateService;
+    transform(key: string, params?: Record<string, string | number | boolean>): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisTranslatePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SolarisTranslatePipe, "translate", true>;
+}

package/lib/services/translation/provider/provide-solaris-translate.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@angular/core';
+import type { SolarisTranslateConfig } from '../model/solaris-translate-config.interface';
+export declare function provideSolarisTranslate(config: SolarisTranslateConfig): Provider[];

package/lib/services/translation/service/solaris-translate.service.d.ts

@@ -0,0 +1,15 @@
+import type { SolarisLocale } from '../model/solaris-locale.types';
+import type { SolarisTranslateParams } from '../model/solaris-translation.types';
+import * as i0 from "@angular/core";
+export declare class SolarisTranslateService {
+    private readonly platformId;
+    private readonly config;
+    get locale(): SolarisLocale;
+    get fallbackLocale(): SolarisLocale;
+    translate(key: string, params?: SolarisTranslateParams): string;
+    private resolveLocale;
+    private escapeRegExp;
+    private interpolate;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SolarisTranslateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SolarisTranslateService>;
+}

package/lib/services/translation/testing/solaris-translate-testing.provider.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '@angular/core';
+import type { SolarisTranslateConfig } from '../model/solaris-translate-config.interface';
+export declare function provideSolarisTranslateTesting(config?: Partial<SolarisTranslateConfig>): Provider[];

package/lib/services/translation/token/solaris-translate.tokens.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import type { SolarisTranslateConfig } from '../model/solaris-translate-config.interface';
+export declare const SOLARIS_TRANSLATE_CONFIG: InjectionToken<SolarisTranslateConfig>;

package/lib/testing/provide-solaris-testing.d.ts

@@ -0,0 +1,10 @@
+import type { Provider } from '@angular/core';
+import type { SolarisAccessibilityConfig } from '../services/accessibility/model/solaris-accessibility-config.interface';
+import type { SolarisThemeConfig } from '../services/theme/model/solaris-theme-config.interface';
+import type { SolarisTranslateConfig } from '../services/translation/model/solaris-translate-config.interface';
+export interface SolarisTestingOptions {
+    accessibility?: SolarisAccessibilityConfig;
+    theme?: Partial<SolarisThemeConfig>;
+    translate?: Partial<SolarisTranslateConfig>;
+}
+export declare function provideSolarisTesting(options?: SolarisTestingOptions): Provider[];

package/lib/testing/solaris-test-utilities.d.ts

@@ -0,0 +1,3 @@
+import { type TestModuleMetadata } from '@angular/core/testing';
+import { type SolarisTestingOptions } from './provide-solaris-testing';
+export declare function configureSolarisTesting(options?: SolarisTestingOptions, extraConfig?: Partial<TestModuleMetadata>): void;

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@educarehq/solaris-ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "peerDependencies": {
+    "@angular/cdk": "^21.2.0",
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "~21.2.0",
+    "rxjs": "^7.8.0",
     "vitest": "^4.0.8"
   },
   "peerDependenciesMeta": {
@@ -21,12 +25,12 @@
       "default": "./package.json"
     },
     ".": {
-      "types": "./types/educarehq-solaris-ui.d.ts",
-      "default": "./fesm2022/educarehq-solaris-ui.mjs"
+      "types": "./educarehq-solaris-ui.d.ts",
+      "default": "./esm2022/educarehq-solaris-ui.js"
     }
   },
-  "module": "fesm2022/educarehq-solaris-ui.mjs",
-  "typings": "types/educarehq-solaris-ui.d.ts",
+  "module": "esm2022/educarehq-solaris-ui.js",
+  "typings": "educarehq-solaris-ui.d.ts",
   "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/_button.scss

@@ -2,29 +2,29 @@
   --solaris-button-gap: initial;
   --solaris-button-color: initial;
   --solaris-button-radius: initial;
+  --solaris-button-height: initial;
   --solaris-button-padding-x: initial;
   --solaris-button-padding-y: initial;
-  --solaris-button-height: initial;
   --solaris-button-min-width: initial;
   --solaris-button-font-size: initial;
-  --solaris-button-font-weight: initial;
   --solaris-button-icon-size: initial;
   --solaris-button-background: initial;
+  --solaris-button-font-weight: initial;
   --solaris-button-border-color: initial;
   --solaris-button-border-width: initial;
+  --solaris-button-disabled-opacity: 0.5;
   --solaris-button-hover-background: initial;
-  --solaris-button-hover-border-color: initial;
+  --solaris-button-focus-ring-color: initial;
   --solaris-button-active-background: initial;
+  --solaris-button-hover-border-color: initial;
   --solaris-button-active-border-color: initial;
-  --solaris-button-focus-ring-color: initial;
-  --solaris-button-disabled-opacity: 0.5;
 
   --solaris-button-custom-color: initial;
   --solaris-button-custom-background: initial;
   --solaris-button-custom-border-color: initial;
   --solaris-button-custom-hover-background: initial;
-  --solaris-button-custom-hover-border-color: initial;
   --solaris-button-custom-active-background: initial;
+  --solaris-button-custom-hover-border-color: initial;
   --solaris-button-custom-active-border-color: initial;
 
   cursor: pointer;
@@ -37,16 +37,16 @@
   gap: var(--solaris-button-gap);
   color: var(--solaris-button-color);
   height: var(--solaris-button-height);
+  line-height: var(--solaris-line-height-sm);
   min-width: var(--solaris-button-min-width);
   font-size: var(--solaris-button-font-size);
   border-radius: var(--solaris-button-radius);
   background: var(--solaris-button-background);
   font-weight: var(--solaris-button-font-weight);
+  font-family: var(--solaris-font-family-sans), system-ui;
   padding: var(--solaris-button-padding-y) var(--solaris-button-padding-x);
   border: var(--solaris-button-border-width) solid
     var(--solaris-button-border-color);
-  line-height: var(--solaris-line-height-sm, 1.25);
-  font-family: var(--solaris-font-family-sans), system-ui;
   transition:
     background var(--solaris-motion-duration-normal, 250ms)
       var(--solaris-motion-easing-standard, ease),
@@ -143,8 +143,8 @@
 }
 
 [solaris-button][data-appearance='outline'] {
-  --solaris-button-border-width: 1px;
   --solaris-button-background: transparent;
+  --solaris-button-border-width: var(--solaris-border-width-sm);
 }
 
 [solaris-button][data-appearance='ghost'] {
@@ -154,135 +154,13 @@
 }
 
 [solaris-button][data-appearance='tonal'] {
-  --solaris-button-border-width: 1px;
+  --solaris-button-border-width: var(--solaris-border-width-sm);
 }
 
 [solaris-button][data-appearance='surface'] {
   --solaris-button-border-width: 0;
 }
 
-[solaris-button][data-appearance='glass'] {
-  --solaris-button-border-width: 1px;
-  --solaris-button-glass-blur: 22px;
-
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-background:
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.24) 0%,
-      rgba(255, 255, 255, 0.1) 34%,
-      rgba(255, 255, 255, 0.04) 100%
-    ),
-    rgba(24, 20, 18, 0.34);
-
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-hover-background:
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.3) 0%,
-      rgba(255, 255, 255, 0.14) 34%,
-      rgba(255, 255, 255, 0.06) 100%
-    ),
-    rgba(24, 20, 18, 0.4);
-
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-active-background:
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.22) 0%,
-      rgba(255, 255, 255, 0.1) 34%,
-      rgba(255, 255, 255, 0.04) 100%
-    ),
-    rgba(24, 20, 18, 0.46);
-
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-border-color: rgba(255, 255, 255, 0.22);
-  --solaris-button-hover-border-color: rgba(255, 255, 255, 0.3);
-  --solaris-button-active-border-color: rgba(255, 255, 255, 0.26);
-
-  --solaris-button-glass-accent: rgba(255, 110, 24, 0.36);
-  --solaris-button-glass-accent-hover: rgba(255, 110, 24, 0.46);
-
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-
-  background: var(--solaris-button-background);
-  border-color: var(--solaris-button-border-color);
-
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/box-shadow for the frosted glass depth effect.
-  box-shadow:
-    0 12px 36px rgba(0, 0, 0, 0.34),
-    inset 0 1px 0 rgba(255, 255, 255, 0.28),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
-
-  backdrop-filter: blur(var(--solaris-button-glass-blur)) saturate(150%)
-    contrast(108%);
-
-  -webkit-backdrop-filter: blur(var(--solaris-button-glass-blur)) saturate(150%)
-    contrast(108%);
-}
-
-[solaris-button][data-appearance='glass']::before {
-  inset: 0;
-  content: '';
-  z-index: -1;
-  opacity: 0.95;
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-
-  // SOLARIS_TOKEN_EXCEPTION: glass ::before requires translucent rgba for inner highlights.
-  background:
-    radial-gradient(
-      circle at 72% 58%,
-      var(--solaris-button-glass-accent),
-      transparent 42%
-    ),
-    radial-gradient(
-      circle at 22% 16%,
-      rgba(255, 255, 255, 0.2),
-      transparent 34%
-    ),
-    // SOLARIS_TOKEN_EXCEPTION: glass ::before requires translucent rgba for inner highlights.
-    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 46%);
-
-  transition:
-    opacity var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease),
-    filter var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease);
-}
-
-[solaris-button][data-appearance='glass']:hover {
-  background: var(--solaris-button-hover-background);
-  border-color: var(--solaris-button-hover-border-color);
-
-  // SOLARIS_TOKEN_EXCEPTION: glass hover requires translucent rgba/box-shadow for the depth effect.
-  box-shadow:
-    0 14px 42px rgba(0, 0, 0, 0.38),
-    inset 0 1px 0 rgba(255, 255, 255, 0.34),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
-}
-
-[solaris-button][data-appearance='glass']:hover::before {
-  opacity: 1;
-  filter: saturate(115%);
-}
-
-[solaris-button][data-appearance='glass']:active,
-[solaris-button][data-appearance='glass'][data-active] {
-  transform: translateY(1px);
-  background: var(--solaris-button-active-background);
-  border-color: var(--solaris-button-active-border-color);
-
-  // SOLARIS_TOKEN_EXCEPTION: glass active requires translucent rgba/box-shadow for the depth effect.
-  box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.34),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    inset 0 2px 8px rgba(0, 0, 0, 0.18);
-}
-
 [solaris-button][data-color='neutral'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-text-inverse);
   --solaris-button-background: var(--solaris-text-default);
@@ -325,14 +203,6 @@
   --solaris-button-active-background: var(--solaris-surface-subtle);
 }
 
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='neutral'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-text-glass);
-  --solaris-button-glass-accent: rgba(255, 110, 24, 0.36);
-  --solaris-button-glass-accent-hover: rgba(255, 110, 24, 0.46);
-  --solaris-button-focus-ring-color: var(--solaris-text-default);
-}
-
 [solaris-button][data-color='primary'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-primary-text);
   --solaris-button-background: var(--solaris-primary-base);
@@ -374,14 +244,6 @@
   --solaris-button-active-background: var(--solaris-primary-active);
 }
 
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='primary'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-primary-text);
-  --solaris-button-glass-accent: rgba(22, 119, 255, 0.32);
-  --solaris-button-glass-accent-hover: rgba(22, 119, 255, 0.42);
-  --solaris-button-focus-ring-color: var(--solaris-primary-base);
-}
-
 [solaris-button][data-color='success'][data-appearance='solid'] {
   --solaris-button-background: var(--solaris-success-base);
   --solaris-button-color: var(--solaris-success-on-solid);
@@ -423,14 +285,6 @@
   --solaris-button-active-background: var(--solaris-success-active);
 }
 
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='success'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-success-text);
-  --solaris-button-glass-accent: rgba(22, 163, 74, 0.32);
-  --solaris-button-glass-accent-hover: rgba(22, 163, 74, 0.42);
-  --solaris-button-focus-ring-color: var(--solaris-success-base);
-}
-
 [solaris-button][data-color='warning'][data-appearance='solid'] {
   --solaris-button-background: var(--solaris-warning-base);
   --solaris-button-color: var(--solaris-warning-on-solid);
@@ -472,14 +326,6 @@
   --solaris-button-active-background: var(--solaris-warning-active);
 }
 
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='warning'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-warning-text);
-  --solaris-button-glass-accent: rgba(255, 110, 24, 0.38);
-  --solaris-button-glass-accent-hover: rgba(255, 110, 24, 0.48);
-  --solaris-button-focus-ring-color: var(--solaris-warning-base);
-}
-
 [solaris-button][data-color='danger'][data-appearance='solid'] {
   --solaris-button-background: var(--solaris-danger-base);
   --solaris-button-color: var(--solaris-danger-on-solid);
@@ -521,14 +367,6 @@
   --solaris-button-active-background: var(--solaris-danger-active);
 }
 
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='danger'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-danger-text);
-  --solaris-button-glass-accent: rgba(220, 38, 38, 0.34);
-  --solaris-button-glass-accent-hover: rgba(220, 38, 38, 0.44);
-  --solaris-button-focus-ring-color: var(--solaris-danger-base);
-}
-
 [solaris-button][data-color='info'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-info-text);
   --solaris-button-background: var(--solaris-info-base);
@@ -570,14 +408,6 @@
   --solaris-button-active-background: var(--solaris-info-active);
 }
 
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='info'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-info-text);
-  --solaris-button-glass-accent: rgba(59, 130, 246, 0.32);
-  --solaris-button-focus-ring-color: var(--solaris-info-base);
-  --solaris-button-glass-accent-hover: rgba(59, 130, 246, 0.42);
-}
-
 [solaris-button][data-color='custom'] {
   --solaris-button-hover-background: var(
     --solaris-button-custom-hover-background
@@ -610,71 +440,71 @@
 }
 
 [solaris-button][data-size='sm'] {
-  --solaris-button-height: 2rem;
-  --solaris-button-gap: 0.25rem;
-  --solaris-button-min-width: 4rem;
-  --solaris-button-padding-x: 0.75rem;
-  --solaris-button-padding-y: 0.25rem;
-  --solaris-button-icon-size: 0.875rem;
-  --solaris-button-font-size: var(--solaris-font-size-sm, 0.875rem);
-  --solaris-button-font-weight: var(--solaris-font-weight-medium, 500);
+  --solaris-button-gap: var(--solaris-spacing-1);
+  --solaris-button-height: var(--solaris-spacing-8);
+  --solaris-button-padding-x: var(--solaris-spacing-3);
+  --solaris-button-padding-y: var(--solaris-spacing-1);
+  --solaris-button-min-width: var(--solaris-spacing-16);
+  --solaris-button-icon-size: var(--solaris-font-size-sm);
+  --solaris-button-font-size: var(--solaris-font-size-sm);
+  --solaris-button-font-weight: var(--solaris-font-weight-medium);
 }
 
 [solaris-button][data-size='md'] {
-  --solaris-button-gap: 0.375rem;
-  --solaris-button-height: 2.5rem;
-  --solaris-button-min-width: 5rem;
-  --solaris-button-padding-x: 1rem;
-  --solaris-button-icon-size: 1rem;
-  --solaris-button-padding-y: 0.375rem;
-  --solaris-button-font-size: var(--solaris-font-size-md, 0.875rem);
-  --solaris-button-font-weight: var(--solaris-font-weight-medium, 500);
+  --solaris-button-gap: var(--solaris-spacing-2);
+  --solaris-button-height: var(--solaris-spacing-10);
+  --solaris-button-padding-y: var(--solaris-spacing-2);
+  --solaris-button-padding-x: var(--solaris-spacing-4);
+  --solaris-button-icon-size: var(--solaris-spacing-4);
+  --solaris-button-min-width: var(--solaris-spacing-20);
+  --solaris-button-font-size: var(--solaris-font-size-md);
+  --solaris-button-font-weight: var(--solaris-font-weight-medium);
 }
 
 [solaris-button][data-size='lg'] {
-  --solaris-button-gap: 0.5rem;
-  --solaris-button-height: 3rem;
-  --solaris-button-min-width: 6rem;
-  --solaris-button-padding-y: 0.5rem;
-  --solaris-button-padding-x: 1.25rem;
-  --solaris-button-icon-size: 1.25rem;
-  --solaris-button-font-size: var(--solaris-font-size-lg, 1rem);
-  --solaris-button-font-weight: var(--solaris-font-weight-semibold, 600);
+  --solaris-button-gap: var(--solaris-spacing-2);
+  --solaris-button-height: var(--solaris-spacing-12);
+  --solaris-button-padding-y: var(--solaris-spacing-2);
+  --solaris-button-padding-x: var(--solaris-spacing-5);
+  --solaris-button-icon-size: var(--solaris-spacing-5);
+  --solaris-button-min-width: var(--solaris-spacing-24);
+  --solaris-button-font-size: var(--solaris-font-size-lg);
+  --solaris-button-font-weight: var(--solaris-font-weight-semibold);
 }
 
 [solaris-button][data-radius='none'] {
-  --solaris-button-radius: var(--solaris-radius-none, 0);
+  --solaris-button-radius: var(--solaris-radius-none);
 }
 
 [solaris-button][data-radius='sm'] {
-  --solaris-button-radius: var(--solaris-radius-sm, 0.25rem);
+  --solaris-button-radius: var(--solaris-radius-sm);
 }
 
 [solaris-button][data-radius='md'] {
-  --solaris-button-radius: var(--solaris-radius-md, 0.5rem);
+  --solaris-button-radius: var(--solaris-radius-md);
 }
 
 [solaris-button][data-radius='lg'] {
-  --solaris-button-radius: var(--solaris-radius-lg, 0.75rem);
+  --solaris-button-radius: var(--solaris-radius-lg);
 }
 
 [solaris-button][data-radius='full'] {
-  --solaris-button-radius: var(--solaris-radius-full, 624.9375rem);
+  --solaris-button-radius: var(--solaris-radius-full);
 }
 
 [solaris-button][data-density='compact'] {
-  --solaris-button-height: 2rem;
-  --solaris-button-gap: 0.25rem;
-  --solaris-button-min-width: 4rem;
-  --solaris-button-padding-x: 0.75rem;
-  --solaris-button-icon-size: 0.875rem;
-  --solaris-button-padding-y: 0.1875rem;
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-padding-y: var(--solaris-spacing-4);
+  --solaris-button-min-width: var(--solaris-spacing-10);
+  --solaris-button-icon-size: var(--solaris-font-size-sm);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
 }
 
 [solaris-button][data-density='comfortable'] {
-  --solaris-button-gap: 0.5rem;
-  --solaris-button-height: 2.5rem;
-  --solaris-button-padding-x: 1rem;
-  --solaris-button-icon-size: 1rem;
-  --solaris-button-padding-y: 0.5rem;
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-icon-size: var(--solaris-spacing-4);
+  --solaris-button-padding-y: var(--solaris-spacing-4);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
 }

package/styles/_core.scss

@@ -1,37 +1,37 @@
-/// Solaris UI Core
-/// Provides root font-size strategy and base resets.
-///
-/// The default `none` strategy respects the browser's default font-size (typically 16px)
-/// and produces no additional CSS. Consumers who prefer the `rem-10` strategy may opt in,
-/// but must ensure token SCSS files are imported at the correct scope.
-///
-/// Usage:
-///   @use '@solaris-ui/angular/styles' as solaris;
-///
-///   // Default: no root font-size override (browser default)
-///   @include solaris.core();
-///
-///   // rem-10 strategy: 1rem = 10px at root, body reset to 16px
-///   @include solaris.core((root-font-size: rem-10));
-
-@use 'sass:map';
-
-$-default-config: (
-  root-font-size: none,
-);
-
-@mixin core($config: ()) {
-  $merged: map.merge($-default-config, $config);
-
-  $root-font-size: map.get($merged, root-font-size);
-
-  @if $root-font-size == rem-10 {
-    :root {
-      font-size: 62.5%;
-    }
-
-    body {
-      font-size: 1.6rem;
-    }
-  }
-}
+/// Solaris UI Core
+/// Provides root font-size strategy and base resets.
+///
+/// The default `none` strategy respects the browser's default font-size (typically 16px)
+/// and produces no additional CSS. Consumers who prefer the `rem-10` strategy may opt in,
+/// but must ensure token SCSS files are imported at the correct scope.
+///
+/// Usage:
+///   @use '@solaris-ui/angular/styles' as solaris;
+///
+///   // Default: no root font-size override (browser default)
+///   @include solaris.core();
+///
+///   // rem-10 strategy: 1rem = 10px at root, body reset to 16px
+///   @include solaris.core((root-font-size: rem-10));
+
+@use 'sass:map';
+
+$-default-config: (
+  root-font-size: none,
+);
+
+@mixin core($config: ()) {
+  $merged: map.merge($-default-config, $config);
+
+  $root-font-size: map.get($merged, root-font-size);
+
+  @if $root-font-size == rem-10 {
+    :root {
+      font-size: 62.5%;
+    }
+
+    body {
+      font-size: 1.6rem;
+    }
+  }
+}