platform-core-ng 21.1.0

package/styles/form/select.scss

@@ -0,0 +1,50 @@
+select {
+  box-sizing: border-box;
+  height: var(--platform-input-height, var(--input-height, 32px));
+  padding: 0 var(--platform-input-padding-x, var(--input-padding-x, 12px));
+  border: 1px solid var(--platform-control-border, var(--input-border, #e5e7eb));
+  border-radius: var(--platform-input-radius, var(--input-radius, 8px));
+  background: var(--platform-control-bg, var(--input-bg, #ffffff));
+  color: var(--platform-control-color, var(--input-text, #111827));
+  font: inherit;
+  font-size: var(--platform-input-font-size, var(--input-font-size, 13px));
+  font-weight: var(--input-font-weight, 400);
+  line-height: var(--platform-input-line-height, var(--platform-control-line-height, 20px));
+  outline: none;
+  box-shadow: none;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--platform-control-border-hover, var(--input-hover-border, #d1d5db));
+    background: var(--platform-control-bg-hover, var(--input-bg, #ffffff));
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-color: var(--platform-control-focus, var(--input-focus-border, #0089ff));
+    box-shadow: 0 0 0 2px var(--platform-control-focus-ring, var(--input-focus-ring, rgba(0, 137, 255, 0.08)));
+  }
+
+  &:disabled {
+    border-color: var(--platform-control-border, var(--input-border, #e5e7eb));
+    background: var(--platform-control-disabled-bg, var(--input-disabled-bg, #f9fafb));
+    color: var(--platform-control-disabled-color, var(--input-disabled-text, #d1d5db));
+    cursor: not-allowed;
+  }
+
+  &[aria-invalid='true'],
+  &.is-error,
+  .is-error & {
+    border-color: var(--platform-control-error, var(--input-error, #f04438));
+
+    &:focus,
+    &:focus-visible {
+      border-color: var(--platform-control-error, var(--input-error, #f04438));
+      box-shadow: 0 0 0 2px var(--platform-control-error-ring, var(--input-error-ring, rgba(240, 68, 56, 0.08)));
+    }
+  }
+}

package/styles/form/textarea.scss

@@ -0,0 +1,65 @@
+@use '../base/tokens' as tk;
+
+textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--platform-textarea-min-height, 72px);
+  padding: var(--platform-textarea-padding-y, tk.$platform-textarea-padding-y) var(--platform-input-padding-x, var(--input-padding-x, tk.$input-padding-x));
+  border: 1px solid var(--platform-control-border, var(--input-border, tk.$input-border));
+  border-radius: var(--platform-input-radius, var(--input-radius, tk.$input-radius));
+  background: var(--platform-control-bg, var(--input-bg, tk.$input-bg));
+  color: var(--platform-control-color, var(--input-text, tk.$input-text));
+  font: inherit;
+  font-size: var(--platform-input-font-size, var(--input-font-size, tk.$input-font-size));
+  font-weight: var(--input-font-weight, tk.$input-font-weight);
+  line-height: var(--platform-input-line-height, var(--platform-control-line-height, tk.$platform-control-line-height));
+  outline: none;
+  resize: vertical;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease;
+
+  &::placeholder {
+    color: var(--platform-control-placeholder, var(--input-placeholder, tk.$input-placeholder));
+    opacity: 1;
+  }
+
+  &:hover:not(:disabled):not([readonly]) {
+    border-color: var(--platform-control-border-hover, var(--input-hover-border, tk.$input-hover-border));
+    background: var(--platform-control-bg-hover, var(--input-bg, tk.$input-bg));
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-color: var(--platform-control-focus, var(--input-focus-border, tk.$input-focus-border));
+    box-shadow: 0 0 0 2px var(--platform-control-focus-ring, var(--input-focus-ring, tk.$input-focus-ring));
+  }
+
+  &:disabled {
+    border-color: var(--platform-control-border, var(--input-border, tk.$input-border));
+    background: var(--platform-control-disabled-bg, var(--input-disabled-bg, tk.$input-disabled-bg));
+    color: var(--platform-control-disabled-color, var(--input-disabled-text, tk.$input-disabled-text));
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  &[readonly] {
+    background: var(--platform-control-readonly-bg, var(--input-disabled-bg, tk.$input-disabled-bg));
+    cursor: default;
+  }
+
+  &[aria-invalid='true'],
+  &.is-error,
+  .is-error & {
+    border-color: var(--platform-control-error, var(--input-error, tk.$input-error));
+
+    &:focus,
+    &:focus-visible {
+      border-color: var(--platform-control-error, var(--input-error, tk.$input-error));
+      box-shadow: 0 0 0 2px var(--platform-control-error-ring, var(--input-error-ring, tk.$input-error-ring));
+    }
+  }
+}

package/styles/foundation.scss

@@ -0,0 +1,16 @@
+@use './base/reset';
+@use './base/scrollbar';
+@use './base/typography';
+
+@use './control/button';
+@use './control/switch';
+
+@use './form/input';
+@use './form/select';
+@use './form/textarea';
+@use './form/checkbox';
+@use './form/radio';
+@use './form/range';
+@use './form/number';
+
+@use './data/table';

package/styles/index.scss

@@ -0,0 +1 @@
+@use './profiles/b/index';

package/styles/profiles/b/index.scss

@@ -0,0 +1,4 @@
+@use './theme';
+@use '../../foundation';
+@use '../../components';
+@use './layout';

package/styles/profiles/b/layout.scss

@@ -0,0 +1,88 @@
+@use '../../base/tokens' as tk;
+
+:root {
+  --profile-kind: 'b';
+}
+
+.app-header {
+  min-height: var(--profile-header-min-height);
+  padding: var(--profile-header-padding-y) var(--profile-header-padding-x);
+  border-bottom: 1px solid var(--profile-header-border-color);
+  background: var(--profile-header-background);
+  backdrop-filter: blur(var(--profile-header-backdrop-blur));
+}
+
+.header-search-trigger,
+.app-header__utility-btn,
+.app-header__action,
+.search-dialog,
+.search-dialog__input-wrap,
+.app-header__utility-panel {
+  border-radius: tk.$radius-common-m;
+  border-radius: var(--profile-control-radius);
+}
+
+button.middle {
+  height: var(--profile-control-min-height);
+  padding-left: var(--profile-control-padding-x);
+  padding-right: var(--profile-control-padding-x);
+}
+
+button.xs {
+  height: var(--profile-control-xs-height);
+}
+
+button.small {
+  height: var(--profile-control-small-height);
+}
+
+button.large {
+  height: var(--profile-control-large-height);
+}
+
+.form-row {
+  margin-bottom: var(--profile-form-row-gap);
+}
+
+.form-label {
+  width: var(--profile-form-label-width);
+}
+
+.input-text,
+.form-input {
+  border-radius: var(--profile-control-radius);
+  padding: var(--profile-input-padding-y) var(--profile-input-padding-x);
+  background: var(--profile-input-surface);
+  box-shadow: var(--profile-input-highlight);
+}
+
+[data-table-pattern='admin'],
+.table-pattern-admin {
+  font-size: tk.$font-size-sm;
+  border-radius: var(--profile-table-radius);
+  box-shadow: var(--profile-table-shadow);
+
+  thead {
+    background: var(--profile-table-header-surface);
+  }
+
+  thead tr th,
+  tbody tr td {
+    padding-top: var(--profile-table-cell-padding-y);
+    padding-bottom: var(--profile-table-cell-padding-y);
+  }
+}
+
+.search-dialog-mask {
+  background: var(--profile-dialog-mask);
+}
+
+button {
+  letter-spacing: var(--profile-button-letter-spacing);
+  text-transform: var(--profile-button-transform);
+}
+
+html,
+body {
+  letter-spacing: var(--profile-page-letter-spacing);
+}

package/styles/profiles/b/theme.scss

@@ -0,0 +1,44 @@
+@use '../../base/theme';
+
+:root {
+  --profile-header-min-height: 3rem;
+  --profile-header-padding-x: var(--space-4);
+  --profile-header-padding-y: var(--space-1);
+  --profile-header-mobile-min-height: 3rem;
+  --profile-header-mobile-padding-x: var(--space-3);
+  --profile-header-backdrop-blur: 0;
+  --profile-header-background: var(--color-bg);
+  --profile-header-border-color: var(--color-divider);
+
+  --profile-control-xs-height: var(--button-height-xs);
+  --profile-control-small-height: var(--button-height-sm);
+  --profile-control-min-height: var(--button-height-md);
+  --profile-control-large-height: var(--button-height-lg);
+  --profile-control-padding-x: var(--button-padding-x-md);
+  --profile-control-radius: var(--radius-common-m);
+  --profile-control-shadow: var(--shadow-common-s);
+  --profile-control-surface: var(--color-surface);
+
+  --profile-form-row-gap: var(--space-2);
+  --profile-form-label-width: 5.5rem;
+  --profile-input-padding-y: var(--space-2);
+  --profile-input-padding-x: var(--space-2);
+  --profile-input-surface: var(--color-surface);
+  --profile-input-highlight: transparent;
+  --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-sm);
+
+  --profile-table-radius: var(--radius-common-m);
+  --profile-table-shadow: none;
+  --profile-table-cell-padding-y: var(--space-2);
+  --profile-table-header-surface: var(--color-surface-soft);
+  --profile-table-row-stripe: transparent;
+
+  --profile-dialog-mask: rgba(126, 136, 146, 0.2);
+  --profile-button-letter-spacing: normal;
+  --profile-button-transform: none;
+  --profile-page-letter-spacing: normal;
+}

package/styles/profiles/screen/index.scss

@@ -0,0 +1,3 @@
+@use './theme';
+@use '../../foundation';
+@use './layout';

package/styles/profiles/screen/layout.scss

@@ -0,0 +1,125 @@
+@use '../../base/tokens' as tk;
+@use '../../base/breakpoints' as bp;
+
+:root {
+  --profile-kind: 'screen';
+}
+
+.app-header {
+  min-height: var(--profile-header-min-height);
+  padding: var(--profile-header-padding-y) var(--profile-header-padding-x);
+  border-bottom: 1px solid var(--profile-header-border-color);
+  background: var(--profile-header-background);
+  backdrop-filter: blur(var(--profile-header-backdrop-blur));
+}
+
+.header-search-trigger,
+.app-header__utility-btn,
+.app-header__action,
+.search-dialog,
+.search-dialog__input-wrap,
+.app-header__utility-panel,
+.app-header__panel-item,
+.search-result-item,
+.input-text,
+.form-input,
+[data-table-pattern='admin'],
+.table-pattern-admin {
+  border-radius: var(--profile-control-radius);
+  border-color: tk.$color-border-strong;
+}
+
+.header-search-trigger,
+.app-header__utility-btn,
+.app-header__action,
+.search-dialog__input-wrap {
+  min-height: var(--profile-control-min-height);
+  background: var(--profile-control-surface);
+}
+
+.app-header__utility-btn,
+.app-header__action,
+.app-header__utility-panel,
+.search-dialog,
+.search-result-item {
+  box-shadow: var(--profile-control-shadow);
+}
+
+button {
+  text-transform: var(--profile-button-transform);
+  letter-spacing: var(--profile-button-letter-spacing);
+}
+
+button.large {
+  height: var(--profile-control-large-height);
+}
+
+button.middle {
+  height: var(--profile-control-min-height);
+}
+
+button.small {
+  height: var(--profile-control-small-height);
+}
+
+.form-row {
+  margin-bottom: var(--profile-form-row-gap);
+}
+
+.form-label {
+  width: var(--profile-form-label-width);
+  font-weight: tk.$font-weight-semibold;
+  color: tk.$color-text-secondary;
+}
+
+.input-text,
+.form-input {
+  min-height: var(--profile-control-min-height);
+  padding: var(--profile-input-padding-y) var(--profile-input-padding-x);
+  background: var(--profile-input-surface);
+  box-shadow: var(--profile-input-highlight);
+}
+
+[data-table-pattern='admin'],
+.table-pattern-admin {
+  overflow: hidden;
+  box-shadow: var(--profile-table-shadow);
+  border-radius: var(--profile-table-radius);
+
+  thead {
+    background: var(--profile-table-header-surface);
+  }
+
+  thead tr th {
+    color: tk.$color-text-secondary;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  thead tr th,
+  tbody tr td {
+    padding-top: var(--profile-table-cell-padding-y);
+    padding-bottom: var(--profile-table-cell-padding-y);
+  }
+
+  tbody tr:nth-child(even) td {
+    background: var(--profile-table-row-stripe);
+  }
+}
+
+.search-dialog-mask {
+  background: var(--profile-dialog-mask);
+}
+
+html,
+body {
+  letter-spacing: var(--profile-page-letter-spacing);
+}
+
+@media (max-width: bp.$mobile-breakpoint) {
+  .app-header {
+    min-height: var(--profile-header-mobile-min-height);
+    padding-left: var(--profile-header-mobile-padding-x);
+    padding-right: var(--profile-header-mobile-padding-x);
+  }
+}

package/styles/profiles/screen/theme.scss

@@ -0,0 +1,131 @@
+@use '../b/theme';
+
+:root {
+  --color-theme-primary-1: rgba(21, 186, 255, 0.24);
+  --color-theme-primary-2: rgba(21, 186, 255, 0.44);
+  --color-theme-primary-3: rgba(21, 186, 255, 0.12);
+
+  --color-primary-50: #eefcff;
+  --color-primary-100: #d5f7ff;
+  --color-primary-200: #aaeefe;
+  --color-primary-300: #6ddffb;
+  --color-primary-400: #32cdf5;
+  --color-primary-500: #15baff;
+  --color-primary-600: #15baff;
+  --color-primary-700: #009ee6;
+  --color-primary-800: #007bc0;
+  --color-primary-900: #0b3550;
+
+  --color-accent-500: #32e6a1;
+  --color-accent-600: #18c885;
+  --color-accent-700: #0fa76d;
+  --color-success: #32e6a1;
+  --color-success-bg: rgba(50, 230, 161, 0.22);
+  --color-warning: #ffb547;
+  --color-warning-bg: rgba(255, 181, 71, 0.22);
+  --color-error: #ff6b7a;
+  --color-error-bg: rgba(255, 107, 122, 0.2);
+  --color-info: #15baff;
+  --color-info-bg: rgba(21, 186, 255, 0.16);
+
+  --color-text-level-1: #d9f6ff;
+  --color-text-level-2: rgba(217, 246, 255, 0.76);
+  --color-text-level-3: rgba(217, 246, 255, 0.56);
+  --color-text-level-4: rgba(217, 246, 255, 0.36);
+  --color-text-stamp: rgba(217, 246, 255, 0.08);
+  --color-bg-deep: #07131f;
+  --color-bg-z1: #0c1b2b;
+  --color-fg: #0c1b2b;
+  --color-fg-z1: #112338;
+  --color-fg-press: #132944;
+  --color-line-hard: rgba(113, 202, 255, 0.3);
+  --color-line-light: rgba(113, 202, 255, 0.14);
+  --color-sidebar-bg: #091726;
+
+  --color-primary-subtle: rgba(21, 186, 255, 0.14);
+  --color-link: #7addff;
+  --color-link-hover: #a6ebff;
+  --color-link-active: #d3f6ff;
+  --color-focus-ring: rgba(21, 186, 255, 0.34);
+
+  --shadow-common-s: 0 0 0 1px rgba(21, 186, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.28);
+  --shadow-common-m: 0 0 0 1px rgba(21, 186, 255, 0.1), 0 14px 32px rgba(0, 0, 0, 0.34);
+  --shadow-common-l: 0 0 0 1px rgba(21, 186, 255, 0.14), 0 24px 56px rgba(0, 0, 0, 0.42);
+  --radius-common-s: 0.125rem;
+  --radius-common-m: 0.25rem;
+  --radius-common-l: 0.5rem;
+  --radius-common-auto-factor: 0.08;
+
+  --font-sans:
+    PingFang SC, BlinkMacSystemFont, Helvetica Neue, Tahoma, Microsoft Yahei, Arial,
+    Hiragino Sans GB, sans-serif;
+  --font-size-footnote: 0.8125rem;
+  --font-size-description: 0.9375rem;
+  --font-size-body: 1.125rem;
+  --font-size-paragraph: 1.125rem;
+  --font-size-h2: 1.375rem;
+  --font-size-h1: 1.75rem;
+  --font-size-large-title: 2.25rem;
+  --font-size-super-title: 3rem;
+
+  --line-height-footnote: 1.25rem;
+  --line-height-description: 1.5rem;
+  --line-height-body: 1.625rem;
+  --line-height-paragraph: 1.875rem;
+  --line-height-h2: 2rem;
+  --line-height-h1: 2.375rem;
+  --line-height-large-title: 2.875rem;
+  --line-height-super-title: 3.5rem;
+
+  --space-1: 0.5rem;
+  --space-2: 0.75rem;
+  --space-3: 1rem;
+  --space-4: 1.25rem;
+  --space-5: 1.75rem;
+  --space-6: 2.25rem;
+  --space-7: 2.75rem;
+  --space-8: 3.5rem;
+
+  --profile-header-min-height: 4rem;
+  --profile-header-padding-x: var(--space-6);
+  --profile-header-padding-y: var(--space-2);
+  --profile-header-mobile-min-height: 3.5rem;
+  --profile-header-mobile-padding-x: var(--space-4);
+  --profile-header-backdrop-blur: 0;
+  --profile-header-background: linear-gradient(180deg, rgba(12, 27, 43, 0.96), rgba(10, 23, 37, 0.92));
+  --profile-header-border-color: rgba(21, 186, 255, 0.14);
+
+  --profile-control-min-height: 2.5rem;
+  --profile-control-small-height: 1.875rem;
+  --profile-control-large-height: 3rem;
+  --profile-control-padding-x: var(--space-4);
+  --profile-control-radius: var(--radius-common-m);
+  --profile-control-shadow: var(--shadow-common-m);
+  --profile-control-surface: rgba(17, 35, 56, 0.9);
+
+  --profile-form-row-gap: var(--space-3);
+  --profile-form-label-width: 7rem;
+  --profile-input-padding-y: var(--space-3);
+  --profile-input-padding-x: var(--space-4);
+  --profile-input-surface: rgba(17, 35, 56, 0.88);
+  --profile-input-highlight: none;
+
+  --profile-table-radius: var(--radius-common-m);
+  --profile-table-shadow: var(--shadow-common-l);
+  --profile-table-cell-padding-y: var(--space-3);
+  --profile-table-header-surface: linear-gradient(180deg, rgba(18, 43, 70, 0.96), rgba(14, 33, 54, 0.96));
+  --profile-table-row-stripe: rgba(17, 35, 56, 0.28);
+
+  --profile-dialog-mask: rgba(4, 12, 20, 0.78);
+  --profile-button-letter-spacing: 0.04em;
+  --profile-button-transform: uppercase;
+  --profile-page-letter-spacing: 0.01em;
+}
+
+[data-theme='dark'] {
+  --color-text-level-1: #d9f6ff;
+  --color-text-level-2: rgba(217, 246, 255, 0.76);
+  --color-text-level-3: rgba(217, 246, 255, 0.56);
+  --color-text-level-4: rgba(217, 246, 255, 0.36);
+  --color-text-stamp: rgba(217, 246, 255, 0.08);
+}