@mezzanine-ui/core 1.0.0-beta.1 → 1.0.0-beta.2

package/_styles.scss

@@ -57,6 +57,7 @@
   // Data Display
   @include _load-styles($options, badge);
   @include _load-styles($options, card);
+  @include _load-styles($options, description);
   @include _load-styles($options, empty);
   @include _load-styles($options, tag);
   @include _load-styles($options, accordion);

package/button/_button-styles.scss

@@ -383,7 +383,7 @@ $destructive-ghost: (
   enable: (
     text-color: palette.semantic-variable(text, error),
     icon-color: palette.semantic-variable(icon, error),
-    background-color: palette.semantic-variable(background, base),
+    background-color: none,
     border-color: none,
     focus-color: none,
   ),
@@ -518,6 +518,52 @@ $inverse: (
   ),
 );
 
+$inverse-ghost: (
+  enable: (
+    text-color: palette.semantic-variable(text, fixed-light),
+    icon-color: palette.semantic-variable(icon, fixed-light),
+    background-color: none,
+    border-color: none,
+    focus-color: none,
+  ),
+  hover: (
+    text-color: palette.semantic-variable(text, fixed-light),
+    icon-color: palette.semantic-variable(icon, fixed-light),
+    background-color: palette.semantic-variable(surface, ghost),
+    border-color: none,
+    focus-color: none,
+  ),
+  active: (
+    text-color: palette.semantic-variable(text, fixed-light),
+    icon-color: palette.semantic-variable(icon, fixed-light),
+    background-color: palette.semantic-variable(surface, subtle),
+    border-color: none,
+    focus-color: none,
+  ),
+  focus: (
+    text-color: palette.semantic-variable(text, neutral-solid),
+    icon-color: palette.semantic-variable(icon, neutral-solid),
+    background-color: palette.semantic-variable(background, base),
+    border-color: palette.semantic-variable(border, fixed-light),
+    focus-color: effect.variable(focus, primary),
+  ),
+  disabled: (
+    text-color: palette.semantic-variable(text, neutral-light),
+    icon-color: palette.semantic-variable(icon, neutral-light),
+    background-color: none,
+    border-color: none,
+    focus-color: none,
+  ),
+  // 設計未定義
+  loading: (
+    text-color: none,
+    icon-color: none,
+    background-color: none,
+    border-color: none,
+    focus-color: none,
+  ),
+);
+
 // Variant hierarchy map - 將所有 variants 整合
 $variant-hierarchy: (
   base-primary: $base-primary,
@@ -531,6 +577,7 @@ $variant-hierarchy: (
   destructive-ghost: $destructive-ghost,
   destructive-text-link: $destructive-text-link,
   inverse: $inverse,
+  inverse-ghost: $inverse-ghost,
 );
 
 // Size: main
@@ -796,7 +843,7 @@ $size-configs: (
       @include _apply-variant-states($variant);
 
       // Inverse variant 的所有 size 都使用 button typography
-      @if $variant == 'inverse' {
+      @if $variant == 'inverse' or $variant == 'inverse-ghost' {
         @each $size in $sizes {
           &.#{$prefix}--#{$size} {
             @include _apply-size($size, inverse);

package/button/_button.scss

@@ -16,5 +16,6 @@ $variants: (
   destructive-secondary,
   destructive-ghost,
   destructive-text-link,
-  inverse
+  inverse,
+  inverse-ghost
 );

package/button/button.d.ts

@@ -1,6 +1,6 @@
 import { GeneralSize } from '@mezzanine-ui/system/size';
 import { IconDefinition } from '@mezzanine-ui/icons';
-export type ButtonVariant = 'base-primary' | 'base-secondary' | 'base-tertiary' | 'base-ghost' | 'base-dashed' | 'base-text-link' | 'destructive-primary' | 'destructive-secondary' | 'destructive-ghost' | 'destructive-text-link' | 'inverse';
+export type ButtonVariant = 'base-primary' | 'base-secondary' | 'base-tertiary' | 'base-ghost' | 'base-dashed' | 'base-text-link' | 'destructive-primary' | 'destructive-secondary' | 'destructive-ghost' | 'destructive-text-link' | 'inverse' | 'inverse-ghost';
 export type ButtonSize = GeneralSize;
 export type ButtonIconPosition = 'leading' | 'trailing' | 'icon-only';
 export interface ButtonIcon {

package/description/_description-styles.scss

@@ -0,0 +1,113 @@
+@use 'sass:map';
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/spacing' as spacing;
+@use '~@mezzanine-ui/system/transition' as transition;
+@use '~@mezzanine-ui/system/typography';
+@use './description' as *;
+
+.#{$prefix} {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: spacing.semantic-variable(gap, base);
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: spacing.semantic-variable(gap, tight);
+  }
+}
+
+.#{$title-prefix} {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: spacing.semantic-variable(gap, tight);
+  color: palette.semantic-variable(text, neutral);
+
+  @each $width in $widths {
+    &--#{$width} {
+      @if $width == narrow {
+        width: spacing.semantic-variable(size, container, compressed);
+        min-width: spacing.semantic-variable(size, container, compressed);
+      }
+
+      @if $width == wide {
+        width: spacing.semantic-variable(size, container, snug);
+        min-width: spacing.semantic-variable(size, container, snug);
+      }
+
+      @if $width == stretch {
+        width: auto;
+        flex: 1;
+      }
+
+      @if $width == hug {
+        width: fit-content;
+      }
+    }
+  }
+
+  &__text {
+    @include typography.semantic-variable(body);
+    color: palette.semantic-variable(text, neutral) !important;
+  }
+}
+
+.#{$content-prefix} {
+  color: palette.semantic-variable(text, neutral-solid);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  column-gap: spacing.semantic-variable(gap, tight);
+  width: fit-content;
+
+  @each $size in $sizes {
+    &--#{$size} {
+      @if $size == main {
+        @include typography.semantic-variable(body);
+
+        &.#{$content-prefix}--statistic {
+          @include typography.semantic-variable(h2);
+        }
+      }
+
+      @if $size == sub {
+        @include typography.semantic-variable(caption);
+
+        &.#{$content-prefix}--statistic {
+          @include typography.semantic-variable(h3);
+        }
+      }
+    }
+  }
+
+  &__trend-up {
+    color: palette.semantic-variable(icon, error);
+  }
+
+  &__trend-down {
+    color: palette.semantic-variable(icon, success);
+  }
+
+  &__icon {
+    color: palette.semantic-variable(icon, neutral);
+    transition: transition.standard(color, fast);
+    will-change: color;
+
+    &:hover {
+      color: palette.semantic-variable(icon, neutral-solid);
+    }
+  }
+}
+
+.#{$group-prefix} {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  row-gap: spacing.semantic-variable(gap, base);
+}

package/description/_description.scss

@@ -0,0 +1,6 @@
+$prefix: mzn-description;
+$title-prefix: mzn-description-title;
+$content-prefix: mzn-description-content;
+$group-prefix: mzn-description-group;
+$sizes: (main, sub);
+$widths: (narrow, wide, stretch, hug);

package/description/_index.scss

@@ -0,0 +1 @@
+@forward './description';

package/description/description.d.ts

@@ -0,0 +1,24 @@
+import { Orientation } from '@mezzanine-ui/system/orientation';
+import { GeneralSize } from '@mezzanine-ui/system/size';
+export type DescriptionSize = Extract<GeneralSize, 'main' | 'sub'>;
+export type DescriptionWidthType = 'narrow' | 'wide' | 'stretch' | 'hug';
+export type DescriptionContentVariant = 'badge' | 'button' | 'normal' | 'progress' | 'statistic' | 'tags' | 'trend-up' | 'trend-down' | 'with-icon';
+export type DescriptionOrientation = Orientation;
+export declare const descriptionPrefix = "mzn-description";
+export declare const descriptionTitlePrefix = "mzn-description-title";
+export declare const descriptionContentPrefix = "mzn-description-content";
+export declare const descriptionGroupPrefix = "mzn-description-group";
+export declare const descriptionClasses: {
+    readonly host: "mzn-description";
+    readonly orientation: (orientation: DescriptionOrientation) => string;
+    readonly titleHost: "mzn-description-title";
+    readonly titleText: "mzn-description-title__text";
+    readonly titleWidth: (width: DescriptionWidthType) => string;
+    readonly contentHost: "mzn-description-content";
+    readonly contentIcon: "mzn-description-content__icon";
+    readonly contentTrendUp: "mzn-description-content__trend-up";
+    readonly contentTrendDown: "mzn-description-content__trend-down";
+    readonly contentVariant: (variant: DescriptionContentVariant) => string;
+    readonly contentSize: (size: DescriptionSize) => string;
+    readonly groupHost: "mzn-description-group";
+};

package/description/description.js

@@ -0,0 +1,24 @@
+const descriptionPrefix = 'mzn-description';
+const descriptionTitlePrefix = 'mzn-description-title';
+const descriptionContentPrefix = 'mzn-description-content';
+const descriptionGroupPrefix = 'mzn-description-group';
+const descriptionClasses = {
+    // host
+    host: descriptionPrefix,
+    orientation: (orientation) => `${descriptionPrefix}--${orientation}`,
+    // title
+    titleHost: descriptionTitlePrefix,
+    titleText: `${descriptionTitlePrefix}__text`,
+    titleWidth: (width) => `${descriptionTitlePrefix}--${width}`,
+    // content
+    contentHost: descriptionContentPrefix,
+    contentIcon: `${descriptionContentPrefix}__icon`,
+    contentTrendUp: `${descriptionContentPrefix}__trend-up`,
+    contentTrendDown: `${descriptionContentPrefix}__trend-down`,
+    contentVariant: (variant) => `${descriptionContentPrefix}--${variant}`,
+    contentSize: (size) => `${descriptionContentPrefix}--${size}`,
+    // group
+    groupHost: descriptionGroupPrefix,
+};
+
+export { descriptionClasses, descriptionContentPrefix, descriptionGroupPrefix, descriptionPrefix, descriptionTitlePrefix };

package/description/index.d.ts

@@ -0,0 +1 @@
+export * from './description';

package/description/index.js

@@ -0,0 +1 @@
+export { descriptionClasses, descriptionContentPrefix, descriptionGroupPrefix, descriptionPrefix, descriptionTitlePrefix } from './description.js';

package/dropdown/_dropdown-styles.scss

@@ -115,6 +115,7 @@ $section-configs: (
   &:focus-visible,
   &:focus-within {
     @include _apply-card-state(focus);
+
     outline: none;
   }
 
@@ -124,6 +125,7 @@ $section-configs: (
 
   &.#{$prefix}-item-card--disabled {
     @include _apply-card-state(disabled);
+
     box-shadow: none;
   }
 }
@@ -189,9 +191,14 @@ $section-configs: (
 .#{$prefix}  {
   position: relative;
 
+  &--outside {
+    line-height: 0;
+  }
+
   // dropdown items
   &-list {
     @include _apply-section(list);
+
     width: 100%;
     min-width: max-content;
     max-width: 100%;
@@ -205,6 +212,7 @@ $section-configs: (
 
   &-list-header {
     @include _apply-section(list-header);
+
     position: sticky;
     inset-block-start: 0;
     z-index: 1;
@@ -217,6 +225,7 @@ $section-configs: (
 
   &-group-label {
     @include typography.semantic-variable(body);
+
     color: palette.semantic-variable(text, neutral-light);
     font-feature-settings: 'liga' off, 'clig' off;
     padding-block: spacing.semantic-variable(padding, vertical, tiny);
@@ -230,6 +239,10 @@ $section-configs: (
 
   &-item-card {
     @include _apply-card-states();
+
+    --#{$prefix}-item-card-title-color: palette.semantic-variable(text, neutral-strong);
+    --#{$prefix}-item-card-description-color: palette.semantic-variable(text, neutral);
+
     border-radius: radius.variable(base);
     padding-inline: spacing.semantic-variable(padding, horizontal, base);
     padding-block: spacing.semantic-variable(padding, vertical, base);
@@ -244,9 +257,7 @@ $section-configs: (
       transition.standard(color, fast),
       transition.standard(border, fast),
       transition.standard(box-shadow, fast);
-    --#{$prefix}-item-card-title-color: palette.semantic-variable(text, neutral-strong);
-    --#{$prefix}-item-card-description-color: palette.semantic-variable(text, neutral);
-    
+
     &--disabled {
       cursor: not-allowed;
     }
@@ -275,36 +286,43 @@ $section-configs: (
 
   &-item-card-title {
     @include typography.semantic-variable(label-primary);
+
     overflow: hidden;
     font-feature-settings: 'liga' off, 'clig' off;
     text-overflow: ellipsis;
     transition: transition.standard(color, fast);
     color: var(--#{$prefix}-item-card-title-color, currentColor);
   }
+
   &-item-card-description {
     @include typography.semantic-variable(caption);
+
     overflow: hidden;
     font-feature-settings: 'liga' off, 'clig' off;
     text-overflow: ellipsis;
     transition: transition.standard(color, fast);
     color: var(--#{$prefix}-item-card-description-color, currentColor);
   }
+
   &-item-card-prepend-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: spacing.semantic-variable(gap, base);
   }
+
   &-item-card-highlighted-text {
     color: palette.semantic-variable(text, brand);
     transition: transition.standard(color, fast);
   }
+
   &-item-card-body {
     display: flex;
     flex-direction: column;
     flex: 1 0 0;
     gap: spacing.semantic-variable(gap, tight);
   }
+
   &-item-card-append-content {
     display: flex;
     align-items: center;
@@ -316,6 +334,7 @@ $section-configs: (
   &-action {
     display: flex;
     @include _apply-section(action);
+
     position: sticky;
     inset-block-end: 0;
     flex-direction: column;
@@ -325,6 +344,7 @@ $section-configs: (
 
   &-action--top-bar {
     @include _apply-section(action-top-bar);
+
     display: block;
     width: 100%;
     inset-block-start: 0;
@@ -341,6 +361,7 @@ $section-configs: (
   &-status {
     display: flex;
     @include _apply-section(status);
+
     position: relative;
     align-items: center;
     width: 100%;
@@ -348,6 +369,7 @@ $section-configs: (
 
   &-status-text {
     @include typography.semantic-variable(input);
+
     color: palette.semantic-variable(text, neutral);
     text-align: center;
     font-feature-settings: 'liga' off, 'clig' off;

package/dropdown/dropdown.d.ts

@@ -1,13 +1,12 @@
 import type { IconDefinition } from '@mezzanine-ui/icons';
 export declare const dropdownPrefix = "mzn-dropdown";
-export type dropdownPlacement = 'top' | 'bottom' | 'left' | 'right';
-export type dropdownStatus = 'loading' | 'empty';
-export type dropdownMode = 'single' | 'multiple';
-export type dropdownType = 'default' | 'tree' | 'grouped';
-export type dropdownItemLevel = 0 | 1 | 2;
-export type dropdownItemValidate = 'default' | 'danger';
-export type dropdownCheckPosition = 'prepend' | 'append' | 'none';
-export type dropdownInputPosition = 'inside' | 'outside';
+export type DropdownStatus = 'loading' | 'empty';
+export type DropdownMode = 'single' | 'multiple';
+export type DropdownType = 'default' | 'tree' | 'grouped';
+export type DropdownItemLevel = 0 | 1 | 2;
+export type DropdownItemValidate = 'default' | 'danger';
+export type DropdownCheckPosition = 'prepend' | 'append' | 'none';
+export type DropdownInputPosition = 'inside' | 'outside';
 /**
  * Base dropdown option interface
  */
@@ -37,11 +36,11 @@ export interface DropdownOption {
     /**
      * The validation type of the dropdown option.
      */
-    validate?: dropdownItemValidate;
+    validate?: DropdownItemValidate;
     /**
      * The position of the checkbox.
      */
-    checkSite?: dropdownCheckPosition;
+    checkSite?: DropdownCheckPosition;
     /**
      * The children options for tree/grouped structure.
      * If provided, this option will be rendered as a group with expand/collapse functionality.
@@ -104,17 +103,17 @@ export type DropdownOptionTree = DropdownOptionTreeLevel3;
  * - 'grouped': array with one level of children (children cannot have children)
  * - 'tree': array with nested children up to 3 levels
  */
-export type DropdownOptionsByType<T extends dropdownType | undefined> = T extends 'default' ? DropdownOptionFlat[] : T extends 'grouped' ? DropdownOptionGrouped[] : T extends 'tree' ? DropdownOptionTree[] : DropdownOption[];
+export type DropdownOptionsByType<T extends DropdownType | undefined> = T extends 'default' ? DropdownOptionFlat[] : T extends 'grouped' ? DropdownOptionGrouped[] : T extends 'tree' ? DropdownOptionTree[] : DropdownOption[];
 export interface DropdownItemSharedProps {
     disabled?: boolean;
-    mode?: dropdownMode;
+    mode?: DropdownMode;
     onSelect?: (option: DropdownOption) => void;
-    type?: dropdownType;
+    type?: DropdownType;
     value?: string | string[];
 }
 export declare const dropdownClasses: {
     root: string;
-    inputPosition: (inputPosition: dropdownInputPosition) => string;
+    inputPosition: (inputPosition: DropdownInputPosition) => string;
     list: string;
     listWrapper: string;
     listHeader: string;
@@ -132,7 +131,7 @@ export declare const dropdownClasses: {
     cardActive: string;
     cardDisabled: string;
     cardUnderline: string;
-    cardLevel: (level: dropdownItemLevel) => string;
+    cardLevel: (level: DropdownItemLevel) => string;
     cardBody: string;
     cardTitle: string;
     cardDescription: string;