platform-core-ng 21.1.0

package/styles/control/button.scss

@@ -0,0 +1,565 @@
+@use '../base/tokens' as tk;
+@use '../base/interaction-mixins' as mx;
+
+$btn-surface: tk.$color-surface;
+$btn-surface-soft: tk.$color-surface-soft;
+$btn-text: tk.$color-text-primary;
+$btn-border: tk.$color-border;
+$btn-border-strong: tk.$color-border-strong;
+$btn-primary: tk.$button-primary-bg;
+$btn-primary-hover: tk.$button-primary-bg-hover;
+$btn-primary-active: tk.$button-primary-bg-active;
+$btn-primary-disabled: tk.$color-primary-disabled;
+$btn-danger: tk.$color-danger;
+$btn-danger-hover: tk.$color-danger-hover;
+$btn-danger-active: tk.$color-danger-active;
+$btn-danger-disabled: tk.$color-danger-disabled;
+$btn-focus: tk.$color-focus-ring;
+$btn-neutral-soft: tk.$button-neutral-bg;
+$btn-neutral-soft-hover: tk.$button-neutral-bg-hover;
+
+$btn-font-sm: tk.$font-size-sm;
+$btn-font-md: tk.$font-size-md;
+$btn-font-lg: tk.$font-size-lg;
+$space-0: tk.$space-0;
+$space-1: tk.$space-1;
+$space-2: tk.$space-2;
+$space-2-5: tk.$space-2-5;
+$space-3: tk.$space-3;
+$space-4: tk.$space-4;
+$space-5: tk.$space-5;
+
+button {
+  --button-spinner-color: #{$btn-text};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-1;
+  cursor: pointer;
+  border-radius: tk.$button-radius;
+  padding: $space-1 $space-2;
+  border: 1px solid transparent;
+  background-color: $btn-surface;
+  color: $btn-text;
+  font-weight: tk.$button-font-weight;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    filter 0.2s ease;
+
+  &:focus-visible {
+    @include mx.focus-ring(3px, $btn-focus, null, true);
+  }
+
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+    filter: none;
+  }
+
+  &.no-padding {
+    padding: $space-0;
+  }
+
+  &.default,
+  &.secondary {
+    background-color: $btn-neutral-soft;
+    color: $btn-text;
+    border-color: transparent;
+    --button-spinner-color: #{$btn-text};
+
+    @include mx.hover-enabled {
+      background-color: $btn-neutral-soft-hover;
+    }
+
+    @include mx.active-enabled {
+      background-color: tk.$button-neutral-bg-active;
+    }
+
+    @include mx.disabled-state {
+      background-color: $btn-neutral-soft;
+      color: tk.$color-text-disabled;
+      border-color: transparent;
+    }
+  }
+
+  &.primary {
+    background-color: $btn-primary;
+    color: $btn-surface;
+    border-color: $btn-primary;
+    --button-spinner-color: #{$btn-surface};
+
+    @include mx.hover-enabled {
+      background-color: $btn-primary-hover;
+      border-color: $btn-primary-hover;
+    }
+
+    @include mx.active-enabled {
+      background-color: $btn-primary-active;
+      border-color: $btn-primary-active;
+    }
+
+    @include mx.disabled-state {
+      background-color: $btn-primary-disabled;
+      border-color: $btn-primary-disabled;
+      color: $btn-surface;
+    }
+  }
+
+  &.success,
+  &.warning,
+  &.danger,
+  &.error,
+  &.info {
+    border-color: transparent;
+
+    @include mx.hover-enabled {
+      filter: none;
+    }
+
+    @include mx.active-enabled {
+      filter: brightness(0.97);
+    }
+  }
+
+  &.success {
+    color: tk.$color-success;
+    background-color: tk.$color-success-subtle;
+    --button-spinner-color: #{tk.$color-success};
+
+    @include mx.hover-enabled {
+      color: tk.$color-success-hover;
+    }
+
+    @include mx.active-enabled {
+      color: tk.$color-success-active;
+    }
+  }
+
+  &.warning {
+    color: tk.$color-warning;
+    background-color: tk.$color-warning-subtle;
+    --button-spinner-color: #{tk.$color-warning};
+
+    @include mx.hover-enabled {
+      color: tk.$color-warning-hover;
+    }
+
+    @include mx.active-enabled {
+      color: tk.$color-warning-active;
+    }
+  }
+
+  &.danger {
+    color: $btn-danger;
+    background-color: tk.$color-danger-subtle;
+    --button-spinner-color: #{$btn-danger};
+
+    @include mx.hover-enabled {
+      color: $btn-danger-hover;
+    }
+
+    @include mx.active-enabled {
+      color: $btn-danger-active;
+    }
+  }
+
+  &.error {
+    color: tk.$color-error;
+    background-color: tk.$color-danger-subtle;
+    --button-spinner-color: #{tk.$color-error};
+
+    @include mx.hover-enabled {
+      color: $btn-danger-hover;
+    }
+
+    @include mx.active-enabled {
+      color: $btn-danger-active;
+    }
+  }
+
+  &.info {
+    color: tk.$color-info;
+    background-color: tk.$color-info-subtle;
+    --button-spinner-color: #{tk.$color-info};
+
+    @include mx.hover-enabled {
+      color: tk.$color-info-hover;
+    }
+
+    @include mx.active-enabled {
+      color: tk.$color-info-active;
+    }
+  }
+
+  &.solid {
+    background-color: $btn-text;
+    border-color: $btn-text;
+    color: $btn-surface;
+    --button-spinner-color: #{$btn-surface};
+
+    @include mx.hover-enabled {
+      filter: brightness(0.95);
+    }
+  }
+
+  &.primary.solid {
+    background-color: $btn-primary;
+    border-color: $btn-primary;
+
+    @include mx.hover-enabled {
+      background-color: $btn-primary-hover;
+      border-color: $btn-primary-hover;
+      filter: none;
+    }
+
+    @include mx.active-enabled {
+      background-color: $btn-primary-active;
+      border-color: $btn-primary-active;
+    }
+  }
+
+  &.success.solid {
+    background-color: tk.$color-success;
+    border-color: tk.$color-success;
+
+    @include mx.hover-enabled {
+      background-color: tk.$color-success-hover;
+      border-color: tk.$color-success-hover;
+    }
+
+    @include mx.active-enabled {
+      background-color: tk.$color-success-active;
+      border-color: tk.$color-success-active;
+    }
+  }
+
+  &.warning.solid {
+    background-color: tk.$color-warning;
+    border-color: tk.$color-warning;
+
+    @include mx.hover-enabled {
+      background-color: tk.$color-warning-hover;
+      border-color: tk.$color-warning-hover;
+    }
+
+    @include mx.active-enabled {
+      background-color: tk.$color-warning-active;
+      border-color: tk.$color-warning-active;
+    }
+  }
+
+  &.danger.solid {
+    background-color: $btn-danger;
+    border-color: $btn-danger;
+  }
+
+  &.error.solid {
+    background-color: tk.$color-error;
+    border-color: tk.$color-error;
+  }
+
+  &.info.solid {
+    background-color: tk.$color-info;
+    border-color: tk.$color-info;
+  }
+
+  &.soft,
+  &.subtle {
+    background-color: $btn-neutral-soft;
+    border-color: transparent;
+    color: $btn-text;
+    --button-spinner-color: #{$btn-text};
+  }
+
+  &.primary.soft,
+  &.primary.subtle {
+    background-color: tk.$button-primary-soft-bg;
+    border-color: transparent;
+    color: tk.$color-primary-600;
+    --button-spinner-color: #{tk.$color-primary-600};
+
+    @include mx.hover-enabled {
+      background-color: tk.$button-primary-soft-bg-hover;
+    }
+  }
+
+  &.success-light,
+  &.success.soft,
+  &.success.subtle,
+  &.warning-light,
+  &.warning.soft,
+  &.warning.subtle,
+  &.error-light,
+  &.error.soft,
+  &.error.subtle,
+  &.danger.soft,
+  &.danger.subtle,
+  &.info.soft,
+  &.info.subtle,
+  &.info-light {
+    border-color: transparent;
+
+    @include mx.hover-enabled {
+      filter: brightness(0.97);
+    }
+  }
+
+  &.success-light {
+    color: tk.$color-success;
+    border-color: transparent;
+    background-color: tk.$color-success-subtle;
+  }
+
+  &.warning-light {
+    color: tk.$color-warning;
+    border-color: transparent;
+    background-color: tk.$color-warning-subtle;
+  }
+
+  &.danger.soft,
+  &.danger.subtle {
+    color: $btn-danger;
+    background-color: tk.$color-danger-subtle;
+  }
+
+  &.error-light {
+    color: tk.$color-error;
+    border-color: transparent;
+    background-color: tk.$color-danger-subtle;
+  }
+
+  &.info-light {
+    color: tk.$color-info;
+    border-color: transparent;
+    background-color: tk.$color-info-subtle;
+  }
+
+  &.outline,
+  &.outlined {
+    background-color: $btn-surface;
+    color: $btn-text;
+    border-color: tk.$button-outline-border;
+
+    @include mx.hover-enabled {
+      background-color: transparent;
+      border-color: tk.$button-outline-border-hover;
+    }
+  }
+
+  &.primary.outline,
+  &.primary.outlined {
+    color: tk.$color-primary-600;
+    border-color: tk.$button-outline-border;
+    --button-spinner-color: #{tk.$color-primary-600};
+
+    @include mx.hover-enabled {
+      background-color: tk.$button-primary-soft-bg;
+      border-color: color-mix(in srgb, #{tk.$color-primary} 22%, transparent);
+    }
+  }
+
+  &.success.outline,
+  &.success.outlined {
+    color: tk.$color-success;
+    border-color: tk.$color-success-border;
+  }
+
+  &.warning.outline,
+  &.warning.outlined {
+    color: tk.$color-warning;
+    border-color: tk.$color-warning-border;
+  }
+
+  &.danger.outline,
+  &.danger.outlined,
+  &.error.outline,
+  &.error.outlined {
+    color: $btn-danger;
+    border-color: tk.$color-danger-border;
+  }
+
+  &.info.outline,
+  &.info.outlined {
+    color: tk.$color-info;
+    border-color: tk.$color-info-border;
+  }
+
+  &.dashed {
+    background-color: transparent;
+    color: $btn-text;
+    border: 1px dashed $btn-border;
+
+    @include mx.hover-enabled {
+      border-color: $btn-primary;
+      color: $btn-primary;
+      background-color: tk.$color-primary-50;
+    }
+  }
+
+  &.text {
+    background-color: transparent;
+    color: $btn-text;
+    border: none;
+    --button-spinner-color: #{$btn-text};
+
+    @include mx.hover-enabled {
+      background-color: $btn-neutral-soft;
+    }
+
+    @include mx.active-enabled {
+      background-color: $btn-neutral-soft-hover;
+    }
+
+    @include mx.disabled-state {
+      color: tk.$color-text-disabled;
+    }
+  }
+
+  &.link {
+    background-color: transparent;
+    color: tk.$color-link;
+    border: none;
+    --button-spinner-color: #{tk.$color-link};
+
+    @include mx.hover-enabled {
+      color: tk.$color-link-hover;
+      text-decoration: underline;
+    }
+
+    @include mx.active-enabled {
+      color: tk.$color-link-active;
+    }
+
+    @include mx.disabled-state {
+      color: tk.$color-text-disabled;
+    }
+  }
+
+  &.ghost {
+    background-color: transparent;
+    color: currentColor;
+    border-color: transparent;
+
+    @include mx.hover-enabled {
+      background-color: tk.$color-overlay-hover;
+    }
+
+    @include mx.active-enabled {
+      background-color: tk.$color-overlay-press;
+    }
+  }
+
+  &.lg,
+  &.large {
+    height: tk.$button-height-lg;
+    padding-top: $space-0;
+    padding-bottom: $space-0;
+    padding-left: tk.$button-padding-x-lg;
+    padding-right: tk.$button-padding-x-lg;
+    font-size: tk.$button-font-size;
+  }
+
+  &.md,
+  &.middle {
+    height: tk.$button-height-md;
+    padding-top: $space-0;
+    padding-bottom: $space-0;
+    padding-left: tk.$button-padding-x-md;
+    padding-right: tk.$button-padding-x-md;
+    font-size: tk.$button-font-size;
+  }
+
+  &.sm,
+  &.small {
+    height: tk.$button-height-sm;
+    padding-top: $space-0;
+    padding-bottom: $space-0;
+    padding-left: tk.$button-padding-x-sm;
+    padding-right: tk.$button-padding-x-sm;
+    font-size: tk.$font-size-xs;
+  }
+
+  &.xs {
+    height: tk.$button-height-xs;
+    padding-top: $space-0;
+    padding-bottom: $space-0;
+    padding-left: tk.$button-padding-x-xs;
+    padding-right: tk.$button-padding-x-xs;
+    font-size: tk.$font-size-xs;
+  }
+
+  &.round,
+  &.circle {
+    border-radius: tk.$radius-full;
+  }
+
+  &.square {
+    border-radius: tk.$radius-sm;
+  }
+
+  &.circle {
+    width: tk.$button-height-md;
+    height: tk.$button-height-md;
+    padding: $space-0;
+  }
+
+  &.circle.lg,
+  &.circle.large {
+    width: tk.$button-height-lg;
+    height: tk.$button-height-lg;
+  }
+
+  &.circle.sm,
+  &.circle.small {
+    width: tk.$button-height-sm;
+    height: tk.$button-height-sm;
+  }
+
+  &.circle.xs {
+    width: tk.$button-height-xs;
+    height: tk.$button-height-xs;
+  }
+
+  &.loading,
+  &[aria-busy='true'] {
+    position: relative;
+    pointer-events: none;
+    text-indent: -9999px;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 999px;
+      border: 1.5px solid color-mix(in srgb, var(--button-spinner-color) 28%, transparent);
+      border-right-color: transparent;
+      border-top-color: var(--button-spinner-color);
+      animation: button-spin 0.75s linear infinite;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(0deg);
+      transform-origin: center;
+      text-indent: 0;
+      pointer-events: none;
+    }
+  }
+}
+
+@keyframes button-spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}

package/styles/control/switch.scss

@@ -0,0 +1,85 @@
+@use '../base/tokens' as tk;
+@use '../base/interaction-mixins' as mx;
+
+$switch-width: 2.375rem;
+$switch-height: 1.375rem;
+$switch-thumb-size: 1rem;
+$switch-thumb-offset: 0.125rem;
+$switch-border: tk.$color-border-strong;
+$switch-bg: tk.$color-surface-soft;
+$switch-bg-hover: tk.$color-primary-subtle;
+$switch-bg-checked: tk.$color-primary;
+$switch-thumb: tk.$color-surface;
+$switch-label: tk.$color-text-primary;
+$switch-help: tk.$color-text-secondary;
+$switch-disabled-bg: tk.$color-divider;
+$switch-disabled-thumb: tk.$color-text-disabled;
+$switch-disabled-label: tk.$color-text-disabled;
+
+input[type='checkbox'][role='switch'] {
+  appearance: none;
+  position: relative;
+  flex: 0 0 auto;
+  width: $switch-width;
+  height: $switch-height;
+  margin: 0;
+  border: 1px solid $switch-border;
+  border-radius: 999px;
+  background: $switch-bg;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: $switch-thumb-offset;
+    left: $switch-thumb-offset;
+    width: $switch-thumb-size;
+    height: $switch-thumb-size;
+    border-radius: 999px;
+    background: $switch-thumb;
+    box-shadow: tk.$shadow-common-s;
+    transition:
+      background-color 160ms ease,
+      transform 160ms ease;
+  }
+
+  &:hover {
+    border-color: tk.$color-primary-hover;
+    background: $switch-bg-hover;
+  }
+
+  &:checked {
+    border-color: $switch-bg-checked;
+    background: $switch-bg-checked;
+  }
+
+  &:checked::after {
+    transform: translateX(calc(#{$switch-width} - #{$switch-thumb-size} - (#{$switch-thumb-offset} * 2) - 2px));
+  }
+
+  &:focus-visible {
+    @include mx.focus-ring(2px, tk.$color-focus-ring, tk.$color-primary);
+  }
+
+  @include mx.disabled-state {
+    border-color: transparent;
+    background: $switch-disabled-bg;
+    cursor: not-allowed;
+
+    &::after {
+      background: $switch-disabled-thumb;
+      box-shadow: none;
+    }
+
+    & + .switch__content,
+    & + .form-switch__content,
+    & + .switch__label,
+    & + .form-switch__label {
+      color: $switch-disabled-label;
+    }
+  }
+}

package/styles/data/table/base.scss

@@ -0,0 +1,31 @@
+@use '../../base/tokens' as tk;
+@use '../../base/interaction-mixins' as mx;
+
+$font-sm: tk.$font-size-sm;
+
+table,
+.table-pattern-admin,
+[data-table-pattern='admin'],
+.table-pattern-screen,
+[data-table-pattern='screen'] {
+  width: 100%;
+  max-width: 100%;
+  table-layout: auto;
+  overflow: hidden;
+
+  td {
+    input[type='text'] {
+      width: 100%;
+      height: 2rem;
+      padding: tk.$space-1 tk.$space-2;
+      border: 1px solid tk.$color-border;
+      border-radius: tk.$radius-common-m;
+      font-size: $font-sm;
+      color: tk.$color-text-primary;
+
+      &:focus {
+        @include mx.focus-ring(1px, tk.$color-primary, tk.$color-primary);
+      }
+    }
+  }
+}