platform-core-ng 21.1.0

package/styles/base/theme.scss

@@ -0,0 +1,424 @@
+:root {
+  /* Brand */
+  --color-primary-50: #eaf6ff;
+  --color-primary-100: #d6edff;
+  --color-primary-200: #addbff;
+  --color-primary-300: #7ac6ff;
+  --color-primary-400: #3babff;
+  --color-primary-500: #0089ff;
+  --color-primary-600: #007eea;
+  --color-primary-700: #0070d1;
+  --color-primary-800: #005fb2;
+  --color-primary-900: #004c91;
+
+  --color-primary: var(--color-primary-500);
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-active: var(--color-primary-700);
+  --color-primary-disabled: rgba(0, 137, 255, 0.5);
+  --color-primary-subtle: var(--color-primary-50);
+  --color-primary-contrast: #fff;
+
+  --color-link: var(--color-primary);
+  --color-link-hover: var(--color-primary-hover);
+  --color-link-active: var(--color-primary-active);
+  --color-focus-ring: rgba(0, 137, 255, 0.35);
+
+  /* Deprecated primary aliases */
+  --color-blue-1: var(--color-primary);
+  --color-blue-2: var(--color-primary-disabled);
+  --color-blue-3: var(--color-primary-subtle);
+  --color-theme-primary-1: rgba(0, 137, 255, 0.24);
+  --color-theme-primary-2: var(--color-primary-disabled);
+  --color-theme-primary-3: var(--color-primary-subtle);
+
+  /* Accent */
+  --color-accent-50: #fff6ed;
+  --color-accent-100: #ffead2;
+  --color-accent-200: #ffd4a3;
+  --color-accent-300: #ffbd72;
+  --color-accent-400: #ffa640;
+  --color-accent-500: #ff9200;
+  --color-accent-600: #d97b00;
+  --color-accent-700: #a85f00;
+  --color-secondary: var(--color-accent-500);
+
+  /* Surface */
+  --color-fg: #fff;
+  --color-fg-z1: #fff;
+  --color-fg-press: #f7f8fa;
+  --color-bg-deep: #f5f6f7;
+  --color-bg-z1: #fff;
+  --color-bg: #f5f6f7;
+  --color-surface: #fff;
+  --color-surface-soft: #f3f7fc;
+  --color-surface-muted: #f7f8fa;
+  --color-sidebar-bg: #f7f8fa;
+
+  /* Line */
+  --color-line-hard: rgba(25, 31, 37, 0.24);
+  --color-line-light: rgba(25, 31, 37, 0.12);
+  --color-border: rgba(25, 31, 37, 0.12);
+  --color-border-strong: rgba(25, 31, 37, 0.24);
+  --color-divider: rgba(25, 31, 37, 0.08);
+
+  /* Text */
+  --color-text-level-1: #171a1d;
+  --color-text-level-2: rgba(23, 26, 29, 0.6);
+  --color-text-level-3: rgba(23, 26, 29, 0.4);
+  --color-text-level-4: rgba(25, 31, 37, 0.24);
+  --color-text-stamp: rgba(25, 31, 37, 0.05);
+  --color-text-primary: #171a1d;
+  --color-text-secondary: rgba(23, 26, 29, 0.6);
+  --color-text-muted: rgba(23, 26, 29, 0.4);
+  --color-text-placeholder: var(--color-text-muted);
+  --color-text-disabled: rgba(25, 31, 37, 0.24);
+
+  /* Status */
+  --color-success: #00b042;
+  --color-success-hover: #0ac653;
+  --color-success-active: #009638;
+  --color-success-subtle: rgba(0, 176, 66, 0.1);
+  --color-success-border: rgba(0, 176, 66, 0.28);
+  --color-success-bg: var(--color-success-subtle);
+  --color-info: var(--color-primary);
+  --color-info-hover: var(--color-primary-hover);
+  --color-info-active: var(--color-primary-active);
+  --color-info-subtle: var(--color-primary-subtle);
+  --color-info-border: rgba(0, 137, 255, 0.28);
+  --color-info-bg: var(--color-info-subtle);
+  --color-warning: #ff9200;
+  --color-warning-hover: #ffa229;
+  --color-warning-active: #d97b00;
+  --color-warning-subtle: rgba(255, 146, 0, 0.12);
+  --color-warning-border: rgba(255, 146, 0, 0.32);
+  --color-warning-bg: var(--color-warning-subtle);
+  --color-error: #ff5219;
+  --color-error-bg: var(--color-danger-subtle);
+  --color-danger: var(--color-error);
+  --color-danger-hover: #ff6a3d;
+  --color-danger-active: #e63d12;
+  --color-danger-disabled: rgba(255, 82, 25, 0.5);
+  --color-danger-subtle: rgba(255, 82, 25, 0.1);
+  --color-danger-border: rgba(255, 82, 25, 0.32);
+
+  /* Elevation and radius */
+  --color-overlay: rgba(25, 31, 37, 0.4);
+  --color-overlay-hover: rgba(25, 31, 37, 0.08);
+  --color-overlay-press: rgba(25, 31, 37, 0.14);
+  --shadow-common-s: 0 1px 2px rgba(25, 31, 37, 0.04);
+  --shadow-common-m: 0 4px 12px rgba(25, 31, 37, 0.08);
+  --shadow-common-l: 0 12px 32px rgba(25, 31, 37, 0.1);
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-full: 999px;
+  --radius-common-s: var(--radius-sm);
+  --radius-common-m: var(--radius-md);
+  --radius-common-l: var(--radius-lg);
+  --radius-common-auto-factor: 0.12;
+  --platform-scrollbar-size: 0.375rem;
+  --platform-scrollbar-track: transparent;
+  --platform-scrollbar-thumb: rgba(102, 120, 138, 0.42);
+  --platform-scrollbar-thumb-hover: rgba(102, 120, 138, 0.58);
+
+  /* Typography */
+  --font-sans:
+    PingFang SC, BlinkMacSystemFont, Helvetica Neue, Tahoma, Microsoft Yahei, Arial,
+    Hiragino Sans GB, sans-serif;
+
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-tiny: var(--font-size-xs);
+  --font-size-footnote: var(--font-size-xs);
+  --font-size-description: var(--font-size-sm);
+  --font-size-body: var(--font-size-md);
+  --font-size-paragraph: var(--font-size-md);
+  --font-size-h2: var(--font-size-lg);
+  --font-size-h1: var(--font-size-xl);
+  --font-size-large-title: var(--font-size-2xl);
+  --font-size-super-title: var(--font-size-3xl);
+
+  --line-height-tiny: 18px;
+  --line-height-footnote: 18px;
+  --line-height-description: 20px;
+  --line-height-body: 22px;
+  --line-height-paragraph: 22px;
+  --line-height-h2: 24px;
+  --line-height-h1: 26px;
+  --line-height-large-title: 28px;
+  --line-height-super-title: 32px;
+
+  --line-height-xs: var(--line-height-footnote);
+  --line-height-sm: var(--line-height-description);
+  --line-height-md: var(--line-height-body);
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Shared control defaults */
+  --platform-control-width: 10rem;
+  --platform-control-range-width: 15rem;
+  --platform-control-height-xs: 28px;
+  --platform-control-height-sm: 32px;
+  --platform-control-height-md: 36px;
+  --platform-control-height-lg: 40px;
+  --platform-control-padding-x-sm: var(--space-2-5);
+  --platform-control-padding-x-md: var(--space-3);
+  --platform-control-radius-sm: var(--radius-sm);
+  --platform-control-radius-md: var(--radius-md);
+  --platform-control-font-size-sm: var(--font-size-sm);
+  --platform-control-font-size-md: var(--font-size-md);
+  --platform-control-line-height-sm: 20px;
+  --platform-control-line-height-md: 22px;
+  --platform-control-height: var(--profile-control-min-height, var(--platform-control-height-md));
+  --platform-control-padding-x: var(--space-2-5);
+  --platform-control-radius: var(--profile-control-radius, var(--radius-md));
+  --platform-control-font-size: var(--font-size-sm);
+  --platform-control-line-height: 20px;
+
+  /* Input recipe */
+  --input-height-sm: 28px;
+  --input-height: 32px;
+  --input-height-lg: 40px;
+  --input-padding-x-sm: 10px;
+  --input-padding-x: 12px;
+  --input-padding-x-lg: 14px;
+  --input-radius-sm: 7px;
+  --input-radius: 8px;
+  --input-radius-lg: 10px;
+  --input-font-size-sm: 12px;
+  --input-font-size: 13px;
+  --input-font-size-lg: 14px;
+  --input-font-weight: 400;
+  --input-bg: #ffffff;
+  --input-border: #e5e7eb;
+  --input-hover-border: #d1d5db;
+  --input-focus-border: #0089ff;
+  --input-focus-ring: rgba(0, 137, 255, 0.08);
+  --input-text: #111827;
+  --input-placeholder: #9ca3af;
+  --input-disabled-bg: #f9fafb;
+  --input-disabled-text: #d1d5db;
+  --input-error: #f04438;
+  --input-error-ring: rgba(240, 68, 56, 0.08);
+  --input-error-font-size: 12px;
+  --input-error-margin-top: 4px;
+  --input-search-bg: #f5f6f7;
+  --input-search-border: transparent;
+  --input-search-focus-bg: #ffffff;
+  --input-search-height: var(--input-height);
+  --input-soft-search-height: 36px;
+  --input-soft-search-bg: #f3f4f6;
+  --input-soft-search-radius: 10px;
+  --input-soft-search-focus-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --input-icon-size: 16px;
+  --input-icon-gap: 8px;
+  --input-icon-opacity: 0.55;
+  --input-icon-opacity-hover: 0.85;
+
+  --platform-input-height: var(--input-height);
+  --platform-input-padding-x: var(--input-padding-x);
+  --platform-input-radius: var(--input-radius);
+  --platform-input-font-size: var(--input-font-size);
+  --platform-input-line-height: var(--platform-control-line-height);
+  --platform-control-bg: var(--input-bg);
+  --platform-control-bg-hover: var(--input-bg);
+  --platform-control-border: var(--input-border);
+  --platform-control-border-hover: var(--input-hover-border);
+  --platform-control-color: var(--input-text);
+  --platform-control-placeholder: var(--input-placeholder);
+  --platform-control-focus: var(--input-focus-border);
+  --platform-control-focus-ring: var(--input-focus-ring);
+  --platform-control-disabled-bg: var(--input-disabled-bg);
+  --platform-control-disabled-color: var(--input-disabled-text);
+  --platform-control-readonly-bg: var(--input-disabled-bg);
+  --platform-control-error: var(--input-error);
+  --platform-control-error-ring: var(--input-error-ring);
+
+  /* Component recipes */
+  --button-height-xs: 24px;
+  --button-height-sm: 28px;
+  --button-height-md: 32px;
+  --button-height-lg: 36px;
+  --button-height: var(--button-height-md);
+  --button-padding-x-xs: var(--space-2);
+  --button-padding-x-sm: var(--space-2-5);
+  --button-padding-x-md: var(--space-3);
+  --button-padding-x-lg: var(--space-4);
+  --button-radius: var(--radius-md);
+  --button-font-size: var(--font-size-sm);
+  --button-font-weight: var(--font-weight-medium);
+  --button-neutral-bg: rgba(25, 31, 37, 0.045);
+  --button-neutral-bg-hover: rgba(25, 31, 37, 0.075);
+  --button-neutral-bg-active: rgba(25, 31, 37, 0.105);
+  --button-outline-border: rgba(25, 31, 37, 0.09);
+  --button-outline-border-hover: rgba(25, 31, 37, 0.16);
+  --button-primary-bg: color-mix(in srgb, var(--color-primary) 88%, #171a1d);
+  --button-primary-bg-hover: color-mix(in srgb, var(--color-primary) 82%, #171a1d);
+  --button-primary-bg-active: color-mix(in srgb, var(--color-primary) 76%, #171a1d);
+  --button-primary-soft-bg: color-mix(in srgb, var(--color-primary) 9%, transparent);
+  --button-primary-soft-bg-hover: color-mix(in srgb, var(--color-primary) 13%, transparent);
+  --tag-height-sm: 24px;
+  --tag-height-md: 28px;
+  --tag-radius: var(--radius-sm);
+  --calendar-cell-size: 36px;
+  --calendar-radius: var(--radius-xl);
+  --calendar-range-bg: rgba(0, 137, 255, 0.12);
+
+  /* Spacing */
+  --space-0: 0;
+  --space-0-5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-2-5: 0.625rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 2rem;
+  --space-8: 2.5rem;
+  --space-9: 3rem;
+  --space-10: 4.5rem;
+
+  /* Compatibility aliases */
+  --line: var(--color-border);
+  --line-soft: var(--color-divider);
+  --line-strong: var(--color-border-strong);
+  --panel: var(--color-surface);
+  --panel-strong: var(--color-surface-soft);
+  --panel-muted: var(--color-surface-muted);
+  --text: var(--color-text-primary);
+  --muted: var(--color-text-secondary);
+  --muted-soft: var(--color-text-disabled);
+  --muted-strong: rgba(23, 26, 29, 0.78);
+  --primary: var(--color-primary);
+  --primary-soft: var(--color-primary-subtle);
+  --primary-contrast: var(--color-primary-contrast);
+  --primary-info-soft: var(--color-info-bg);
+  --success: var(--color-success);
+  --success-soft: var(--color-success-bg);
+  --danger: var(--color-error);
+  --danger-soft: var(--color-error-bg);
+  --danger-border: var(--color-danger-border);
+  --table-head-bg: var(--color-surface-muted);
+
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-body);
+  background-color: var(--color-bg);
+}
+
+[data-theme='dark'] {
+  --color-primary-50: #10283d;
+  --color-primary-100: #143554;
+  --color-primary-200: #174a78;
+  --color-primary-300: #1b65a8;
+  --color-primary-400: #2585db;
+  --color-primary-500: #3da5ff;
+  --color-primary-600: #68baff;
+  --color-primary-700: #9bd2ff;
+  --color-primary-800: #b9e0ff;
+  --color-primary-900: #d3ecff;
+
+  --color-primary: var(--color-primary-500);
+  --color-primary-hover: var(--color-primary-600);
+  --color-primary-active: var(--color-primary-700);
+  --color-primary-disabled: rgba(61, 165, 255, 0.42);
+  --color-primary-subtle: rgba(61, 165, 255, 0.16);
+
+  --color-link: var(--color-primary-hover);
+  --color-link-hover: var(--color-primary-active);
+  --color-link-active: var(--color-primary-900);
+  --color-focus-ring: rgba(61, 165, 255, 0.36);
+  --color-blue-1: var(--color-primary);
+  --color-blue-2: var(--color-primary-disabled);
+  --color-blue-3: var(--color-primary-subtle);
+  --color-theme-primary-1: rgba(61, 165, 255, 0.28);
+  --color-theme-primary-2: var(--color-primary-disabled);
+  --color-theme-primary-3: var(--color-primary-subtle);
+
+  --color-fg: #111820;
+  --color-fg-z1: #171f28;
+  --color-fg-press: #202a35;
+  --color-bg-deep: #0b1118;
+  --color-bg-z1: #171f28;
+  --color-bg: #0b1118;
+  --color-surface: #171f28;
+  --color-surface-soft: #202a35;
+  --color-surface-muted: #111820;
+  --color-sidebar-bg: #111820;
+
+  --color-line-hard: rgba(216, 226, 238, 0.22);
+  --color-line-light: rgba(216, 226, 238, 0.12);
+  --color-border: rgba(216, 226, 238, 0.12);
+  --color-border-strong: rgba(216, 226, 238, 0.22);
+  --color-divider: rgba(216, 226, 238, 0.08);
+
+  --color-text-level-1: #f2f5f8;
+  --color-text-level-2: rgba(242, 245, 248, 0.72);
+  --color-text-level-3: rgba(242, 245, 248, 0.52);
+  --color-text-level-4: rgba(242, 245, 248, 0.34);
+  --color-text-stamp: rgba(242, 245, 248, 0.08);
+  --color-text-primary: #f2f5f8;
+  --color-text-secondary: rgba(242, 245, 248, 0.72);
+  --color-text-muted: rgba(242, 245, 248, 0.52);
+  --color-text-placeholder: var(--color-text-muted);
+  --color-text-disabled: rgba(242, 245, 248, 0.34);
+
+  --color-success: #35c96f;
+  --color-success-hover: #5bd98a;
+  --color-success-active: #19b85b;
+  --color-success-subtle: rgba(53, 201, 111, 0.16);
+  --color-success-border: rgba(53, 201, 111, 0.34);
+  --color-success-bg: var(--color-success-subtle);
+  --color-info: var(--color-primary);
+  --color-info-hover: var(--color-primary-hover);
+  --color-info-active: var(--color-primary-active);
+  --color-info-subtle: var(--color-primary-subtle);
+  --color-info-border: rgba(61, 165, 255, 0.34);
+  --color-info-bg: var(--color-info-subtle);
+  --color-warning: #ffb33d;
+  --color-warning-hover: #ffc46b;
+  --color-warning-active: #e3951f;
+  --color-warning-subtle: rgba(255, 179, 61, 0.16);
+  --color-warning-border: rgba(255, 179, 61, 0.36);
+  --color-warning-bg: var(--color-warning-subtle);
+  --color-error: #ff7a52;
+  --color-error-bg: var(--color-danger-subtle);
+  --color-danger: var(--color-error);
+  --color-danger-hover: #ff9473;
+  --color-danger-active: #ff6a3d;
+  --color-danger-disabled: rgba(255, 122, 82, 0.42);
+  --color-danger-subtle: rgba(255, 122, 82, 0.16);
+  --color-danger-border: rgba(255, 122, 82, 0.38);
+
+  --color-overlay: rgba(0, 0, 0, 0.48);
+  --color-overlay-hover: rgba(216, 226, 238, 0.1);
+  --color-overlay-press: rgba(216, 226, 238, 0.16);
+  --shadow-common-s: 0 1px 2px rgba(0, 0, 0, 0.28);
+  --shadow-common-m: 0 4px 12px rgba(0, 0, 0, 0.32);
+  --shadow-common-l: 0 12px 32px rgba(0, 0, 0, 0.38);
+  --platform-scrollbar-thumb: rgba(150, 168, 186, 0.44);
+  --platform-scrollbar-thumb-hover: rgba(150, 168, 186, 0.62);
+  --button-neutral-bg: rgba(216, 226, 238, 0.07);
+  --button-neutral-bg-hover: rgba(216, 226, 238, 0.11);
+  --button-neutral-bg-active: rgba(216, 226, 238, 0.15);
+  --button-outline-border: rgba(216, 226, 238, 0.11);
+  --button-outline-border-hover: rgba(216, 226, 238, 0.2);
+  --button-primary-bg: color-mix(in srgb, var(--color-primary) 82%, #f2f5f8);
+  --button-primary-bg-hover: color-mix(in srgb, var(--color-primary) 76%, #f2f5f8);
+  --button-primary-bg-active: color-mix(in srgb, var(--color-primary) 70%, #f2f5f8);
+  --button-primary-soft-bg: color-mix(in srgb, var(--color-primary) 16%, transparent);
+  --button-primary-soft-bg-hover: color-mix(in srgb, var(--color-primary) 22%, transparent);
+
+  --muted-strong: rgba(242, 245, 248, 0.82);
+  --danger-border: var(--color-danger-border);
+}

package/styles/base/typography.scss

@@ -0,0 +1,50 @@
+@use './tokens' as tk;
+
+$space-1: tk.$space-1;
+
+h1,
+h2,
+h3 {
+  margin-top: $space-1;
+  margin-bottom: $space-1;
+  display: flex;
+  align-items: center;
+  color: tk.$color-text-primary;
+}
+
+h1 {
+  font-size: tk.$font-size-h1;
+  line-height: tk.$line-height-h1;
+  font-weight: tk.$font-weight-bold;
+}
+
+h2 {
+  font-size: tk.$font-size-h2;
+  line-height: tk.$line-height-h2;
+  font-weight: tk.$font-weight-bold;
+}
+
+h3 {
+  font-size: tk.$font-size-md;
+  line-height: tk.$line-height-body;
+  font-weight: tk.$font-weight-bold;
+}
+
+h4 {
+  display: flex;
+  margin-top: $space-1;
+  margin-bottom: $space-1;
+  align-items: center;
+  font-size: tk.$font-size-description;
+  line-height: tk.$line-height-description;
+  font-weight: tk.$font-weight-bold;
+  color: tk.$color-text-primary;
+}
+
+p {
+  margin-top: $space-1;
+  margin-bottom: $space-1;
+  font-size: tk.$font-size-paragraph;
+  line-height: tk.$line-height-paragraph;
+  color: tk.$color-text-primary;
+}

package/styles/components/index.scss

@@ -0,0 +1,7 @@
+@use '../../shared/components/s-list-page-layout/s-list-page-layout';
+@use '../../shared/components/s-card/s-card';
+@use '../../shared/components/s-status-dot/s-status-dot';
+@use '../../shared/components/s-dialog/s-dialog-container.component';
+@use './master-detail';
+@use './mail-client';
+@use './mobile-list-directives';