platform-core-ng 21.1.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "platform-core-ng",
+  "version": "21.1.0",
+  "module": "fesm2022/platform-core-ng.mjs",
+  "typings": "types/platform-core-ng.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/platform-core-ng.d.ts",
+      "default": "./fesm2022/platform-core-ng.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/styles/base/_breakpoints.scss

@@ -0,0 +1 @@
+$mobile-breakpoint: 768px;

package/styles/base/_interaction-mixins.scss

@@ -0,0 +1,37 @@
+@use './tokens' as tk;
+
+@mixin focus-ring($size: 1px, $color: tk.$color-primary, $border-color: null, $clear-outline: true) {
+  @if $clear-outline {
+    outline: none;
+  }
+
+  @if $border-color != null {
+    border-color: $border-color;
+  }
+
+  box-shadow: 0 0 0 $size $color;
+}
+
+@mixin focus-outline($size: 2px, $color: tk.$color-primary, $offset: 0) {
+  outline: $size solid $color;
+  outline-offset: $offset;
+}
+
+@mixin hover-enabled {
+  &:hover:not(.disabled):not(:disabled) {
+    @content;
+  }
+}
+
+@mixin active-enabled {
+  &:active:not(.disabled):not(:disabled) {
+    @content;
+  }
+}
+
+@mixin disabled-state {
+  &:disabled,
+  &.disabled {
+    @content;
+  }
+}

package/styles/base/_tokens.scss

@@ -0,0 +1,255 @@
+// SCSS token aliases for theme CSS variables.
+// Use these in style modules to avoid scattering raw var(--color-*) everywhere.
+$color-primary: var(--color-primary);
+$color-primary-hover: var(--color-primary-hover);
+$color-primary-active: var(--color-primary-active);
+$color-primary-disabled: var(--color-primary-disabled);
+$color-primary-subtle: var(--color-primary-subtle);
+$color-primary-contrast: var(--color-primary-contrast);
+$color-primary-50: var(--color-primary-50);
+$color-primary-100: var(--color-primary-100);
+$color-primary-200: var(--color-primary-200);
+$color-primary-300: var(--color-primary-300);
+$color-primary-400: var(--color-primary-400);
+$color-primary-500: var(--color-primary-500);
+$color-primary-600: var(--color-primary-600);
+$color-primary-700: var(--color-primary-700);
+$color-primary-800: var(--color-primary-800);
+$color-primary-900: var(--color-primary-900);
+$color-blue-1: var(--color-blue-1);
+$color-blue-2: var(--color-blue-2);
+$color-blue-3: var(--color-blue-3);
+$color-accent-50: var(--color-accent-50);
+$color-accent-100: var(--color-accent-100);
+$color-accent-200: var(--color-accent-200);
+$color-accent-300: var(--color-accent-300);
+$color-accent-400: var(--color-accent-400);
+$color-accent-500: var(--color-accent-500);
+$color-accent-600: var(--color-accent-600);
+$color-accent-700: var(--color-accent-700);
+$color-secondary: var(--color-secondary);
+$color-theme-primary-1: var(--color-theme-primary-1);
+$color-theme-primary-2: var(--color-theme-primary-2);
+$color-theme-primary-3: var(--color-theme-primary-3);
+$color-overlay: var(--color-overlay);
+$color-overlay-hover: var(--color-overlay-hover);
+$color-overlay-press: var(--color-overlay-press);
+$color-focus-ring: var(--color-focus-ring);
+$color-link: var(--color-link);
+$color-link-hover: var(--color-link-hover);
+$color-link-active: var(--color-link-active);
+$color-danger: var(--color-danger);
+$color-danger-hover: var(--color-danger-hover);
+$color-danger-active: var(--color-danger-active);
+$color-danger-disabled: var(--color-danger-disabled);
+$color-danger-subtle: var(--color-danger-subtle);
+$color-danger-border: var(--color-danger-border);
+
+$color-surface: var(--color-surface);
+$color-surface-soft: var(--color-surface-soft);
+$color-surface-muted: var(--color-surface-muted);
+$color-bg: var(--color-bg);
+$color-fg: var(--color-fg);
+$color-fg-z1: var(--color-fg-z1);
+$color-fg-press: var(--color-fg-press);
+$color-bg-deep: var(--color-bg-deep);
+$color-bg-z1: var(--color-bg-z1);
+$color-sidebar-bg: var(--color-sidebar-bg);
+$color-line-hard: var(--color-line-hard);
+$color-line-light: var(--color-line-light);
+
+$color-text-level-1: var(--color-text-level-1);
+$color-text-level-2: var(--color-text-level-2);
+$color-text-level-3: var(--color-text-level-3);
+$color-text-level-4: var(--color-text-level-4);
+$color-text-stamp: var(--color-text-stamp);
+$color-text-primary: var(--color-text-primary);
+$color-text-secondary: var(--color-text-secondary);
+$color-text-muted: var(--color-text-muted);
+$color-text-placeholder: var(--color-text-placeholder);
+$color-text-disabled: var(--color-text-disabled);
+
+$color-border: var(--color-border);
+$color-border-strong: var(--color-border-strong);
+$color-divider: var(--color-divider);
+
+$shadow-common-s: var(--shadow-common-s);
+$shadow-common-m: var(--shadow-common-m);
+$shadow-common-l: var(--shadow-common-l);
+$radius-common-s: var(--radius-common-s);
+$radius-common-m: var(--radius-common-m);
+$radius-common-l: var(--radius-common-l);
+$radius-common-auto-factor: var(--radius-common-auto-factor);
+$radius-xs: var(--radius-xs);
+$radius-sm: var(--radius-sm);
+$radius-md: var(--radius-md);
+$radius-lg: var(--radius-lg);
+$radius-xl: var(--radius-xl);
+$radius-full: var(--radius-full);
+
+$color-success: var(--color-success);
+$color-success-hover: var(--color-success-hover);
+$color-success-active: var(--color-success-active);
+$color-success-subtle: var(--color-success-subtle);
+$color-success-border: var(--color-success-border);
+$color-success-bg: var(--color-success-bg);
+$color-warning: var(--color-warning);
+$color-warning-hover: var(--color-warning-hover);
+$color-warning-active: var(--color-warning-active);
+$color-warning-subtle: var(--color-warning-subtle);
+$color-warning-border: var(--color-warning-border);
+$color-warning-bg: var(--color-warning-bg);
+$color-error: var(--color-error);
+$color-error-bg: var(--color-error-bg);
+$color-info: var(--color-info);
+$color-info-hover: var(--color-info-hover);
+$color-info-active: var(--color-info-active);
+$color-info-subtle: var(--color-info-subtle);
+$color-info-border: var(--color-info-border);
+$color-info-bg: var(--color-info-bg);
+
+$line: var(--line);
+$line-soft: var(--line-soft);
+$line-strong: var(--line-strong);
+$panel: var(--panel);
+$panel-strong: var(--panel-strong);
+$panel-muted: var(--panel-muted);
+$text: var(--text);
+$muted: var(--muted);
+$muted-soft: var(--muted-soft);
+$muted-strong: var(--muted-strong);
+$primary: var(--primary);
+$primary-soft: var(--primary-soft);
+$primary-contrast: var(--primary-contrast);
+$primary-info-soft: var(--primary-info-soft);
+$success: var(--success);
+$success-soft: var(--success-soft);
+$danger: var(--danger);
+$danger-soft: var(--danger-soft);
+$danger-border: var(--danger-border);
+$table-head-bg: var(--table-head-bg);
+
+$font-sans: var(--font-sans);
+$font-size-tiny: var(--font-size-tiny);
+$font-size-footnote: var(--font-size-footnote);
+$font-size-description: var(--font-size-description);
+$font-size-body: var(--font-size-body);
+$font-size-paragraph: var(--font-size-paragraph);
+$font-size-h2: var(--font-size-h2);
+$font-size-h1: var(--font-size-h1);
+$font-size-large-title: var(--font-size-large-title);
+$font-size-super-title: var(--font-size-super-title);
+$font-size-xs: var(--font-size-xs);
+$font-size-sm: var(--font-size-sm);
+$font-size-md: var(--font-size-md);
+$font-size-lg: var(--font-size-lg);
+$font-size-xl: var(--font-size-xl);
+$font-size-2xl: var(--font-size-2xl);
+$font-size-3xl: var(--font-size-3xl);
+
+$line-height-tiny: var(--line-height-tiny);
+$line-height-footnote: var(--line-height-footnote);
+$line-height-description: var(--line-height-description);
+$line-height-body: var(--line-height-body);
+$line-height-paragraph: var(--line-height-paragraph);
+$line-height-h2: var(--line-height-h2);
+$line-height-h1: var(--line-height-h1);
+$line-height-large-title: var(--line-height-large-title);
+$line-height-super-title: var(--line-height-super-title);
+$line-height-xs: var(--line-height-xs);
+$line-height-sm: var(--line-height-sm);
+$line-height-md: var(--line-height-md);
+
+$font-weight-regular: var(--font-weight-regular);
+$font-weight-medium: var(--font-weight-medium);
+$font-weight-semibold: var(--font-weight-semibold);
+$font-weight-bold: var(--font-weight-bold);
+
+$platform-control-height-xs: var(--platform-control-height-xs);
+$platform-control-height-sm: var(--platform-control-height-sm);
+$platform-control-height-md: var(--platform-control-height-md);
+$platform-control-height-lg: var(--platform-control-height-lg);
+$platform-control-height: var(--platform-control-height);
+
+$button-height: var(--button-height);
+$button-height-xs: var(--button-height-xs);
+$button-height-sm: var(--button-height-sm);
+$button-height-md: var(--button-height-md);
+$button-height-lg: var(--button-height-lg);
+$button-padding-x-xs: var(--button-padding-x-xs);
+$button-padding-x-sm: var(--button-padding-x-sm);
+$button-padding-x-md: var(--button-padding-x-md);
+$button-padding-x-lg: var(--button-padding-x-lg);
+$button-radius: var(--button-radius);
+$button-font-size: var(--button-font-size);
+$button-font-weight: var(--button-font-weight);
+$button-neutral-bg: var(--button-neutral-bg);
+$button-neutral-bg-hover: var(--button-neutral-bg-hover);
+$button-neutral-bg-active: var(--button-neutral-bg-active);
+$button-outline-border: var(--button-outline-border);
+$button-outline-border-hover: var(--button-outline-border-hover);
+$button-primary-bg: var(--button-primary-bg);
+$button-primary-bg-hover: var(--button-primary-bg-hover);
+$button-primary-bg-active: var(--button-primary-bg-active);
+$button-primary-soft-bg: var(--button-primary-soft-bg);
+$button-primary-soft-bg-hover: var(--button-primary-soft-bg-hover);
+$input-height-sm: var(--input-height-sm);
+$input-height: var(--input-height);
+$input-height-lg: var(--input-height-lg);
+$input-padding-x-sm: var(--input-padding-x-sm);
+$input-padding-x: var(--input-padding-x);
+$input-padding-x-lg: var(--input-padding-x-lg);
+$input-radius-sm: var(--input-radius-sm);
+$input-radius: var(--input-radius);
+$input-radius-lg: var(--input-radius-lg);
+$input-font-size-sm: var(--input-font-size-sm);
+$input-font-size: var(--input-font-size);
+$input-font-size-lg: var(--input-font-size-lg);
+$input-font-weight: var(--input-font-weight);
+$input-bg: var(--input-bg);
+$input-border: var(--input-border);
+$input-hover-border: var(--input-hover-border);
+$input-focus-border: var(--input-focus-border);
+$input-focus-ring: var(--input-focus-ring);
+$input-text: var(--input-text);
+$input-placeholder: var(--input-placeholder);
+$input-disabled-bg: var(--input-disabled-bg);
+$input-disabled-text: var(--input-disabled-text);
+$input-error: var(--input-error);
+$input-error-ring: var(--input-error-ring);
+$input-error-font-size: var(--input-error-font-size);
+$input-error-margin-top: var(--input-error-margin-top);
+$input-search-bg: var(--input-search-bg);
+$input-search-border: var(--input-search-border);
+$input-search-focus-bg: var(--input-search-focus-bg);
+$input-search-height: var(--input-search-height);
+$input-soft-search-height: var(--input-soft-search-height);
+$input-soft-search-bg: var(--input-soft-search-bg);
+$input-soft-search-radius: var(--input-soft-search-radius);
+$input-soft-search-focus-shadow: var(--input-soft-search-focus-shadow);
+$input-icon-size: var(--input-icon-size);
+$input-icon-gap: var(--input-icon-gap);
+$input-icon-opacity: var(--input-icon-opacity);
+$input-icon-opacity-hover: var(--input-icon-opacity-hover);
+$platform-control-line-height: var(--platform-control-line-height, 20px);
+$platform-textarea-padding-y: var(--platform-textarea-padding-y, 8px);
+$tag-height-sm: var(--tag-height-sm);
+$tag-height-md: var(--tag-height-md);
+$tag-radius: var(--tag-radius);
+$calendar-cell-size: var(--calendar-cell-size);
+$calendar-radius: var(--calendar-radius);
+$calendar-range-bg: var(--calendar-range-bg);
+
+$space-0: var(--space-0);
+$space-0-5: var(--space-0-5);
+$space-1: var(--space-1);
+$space-2: var(--space-2);
+$space-2-5: var(--space-2-5);
+$space-3: var(--space-3);
+$space-4: var(--space-4);
+$space-5: var(--space-5);
+$space-6: var(--space-6);
+$space-7: var(--space-7);
+$space-8: var(--space-8);
+$space-9: var(--space-9);
+$space-10: var(--space-10);

package/styles/base/reset.scss

@@ -0,0 +1,66 @@
+@use './tokens' as tk;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  font-family: tk.$font-sans !important;
+  font-size: tk.$font-size-body;
+  line-height: tk.$line-height-body;
+  color: tk.$color-text-primary;
+  background-color: tk.$color-bg;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  appearance: none;
+}
+
+img,
+svg,
+canvas,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+lucide-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+app-root {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+}
+
+a {
+  color: tk.$color-link;
+  text-decoration: none;
+
+  &:hover {
+    color: tk.$color-link-hover;
+  }
+
+  &:active {
+    color: tk.$color-link-active;
+  }
+}

package/styles/base/scrollbar.scss

@@ -0,0 +1,22 @@
+* {
+  scrollbar-color: var(--platform-scrollbar-thumb) var(--platform-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: var(--platform-scrollbar-size);
+  height: var(--platform-scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--platform-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--platform-scrollbar-thumb);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--platform-scrollbar-thumb-hover);
+}