@toyu-ui/solid/design/fluent-web.css

<p align="center"> <h1><span style="color: #4a90e2;">T</span><span style="color: #007aff;">Y</span>UI</h1> </p>

@layer tokens, product-theme;

@layer product-theme {
  [data-design-system='fluent-web'] {
    color-scheme: light;

    --ty-design-name: fluent-web;
    --ty-color-background: #ffffff;
    --ty-color-on-background: #242424;
    --ty-color-surface: #ffffff;
    --ty-color-surface-hover: #f5f5f5;
    --ty-color-surface-pressed: #e0e0e0;
    --ty-color-surface-elevated: #ffffff;
    --ty-color-text: #242424;
    --ty-color-text-muted: #616161;
    --ty-color-border: #d1d1d1;
    --ty-color-border-strong: #8a8886;
    --ty-color-accent: #0f6cbd;
    --ty-color-on-accent: #ffffff;
    --ty-color-accent-hover: #115ea3;
    --ty-color-accent-pressed: #0f548c;
    --ty-color-danger: #c50f1f;
    --ty-color-on-danger: #ffffff;
    --ty-color-disabled-surface: #f0f0f0;
    --ty-color-disabled-border: #e0e0e0;
    --ty-color-disabled-text: #bdbdbd;

    --ty-font-family:
      'Segoe UI', 'Segoe UI Web', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --ty-font-size-100: 0.75rem;
    --ty-font-size-200: 0.875rem;
    --ty-font-size-300: 1rem;
    --ty-font-size-400: 1.25rem;
    --ty-font-size-500: 1.75rem;
    --ty-font-weight-regular: 400;
    --ty-font-weight-medium: 500;
    --ty-font-weight-semibold: 600;
    --ty-font-weight-bold: 700;
    --ty-line-height-100: 1rem;
    --ty-line-height-200: 1.25rem;
    --ty-line-height-300: 1.375rem;
    --ty-line-height-400: 1.75rem;
    --ty-letter-spacing-label: 0;

    --ty-space-0: 0;
    --ty-space-1: 0.25rem;
    --ty-space-2: 0.5rem;
    --ty-space-3: 0.75rem;
    --ty-space-4: 1rem;
    --ty-space-5: 1.25rem;
    --ty-space-6: 1.5rem;
    --ty-space-8: 2rem;
    --ty-space-10: 2.5rem;

    --ty-radius-0: 0;
    --ty-radius-1: 0.125rem;
    --ty-radius-2: 0.25rem;
    --ty-radius-3: 0.375rem;
    --ty-radius-4: 0.5rem;
    --ty-radius-pill: 9999px;

    --ty-stroke-thin: 1px;
    --ty-stroke-thick: 2px;
    --ty-focus-width: 2px;
    --ty-focus-offset: 2px;
    --ty-focus-color: #0f6cbd;
    --ty-focus-inner-color: #ffffff;

    --ty-duration-fast: 100ms;
    --ty-duration-normal: 150ms;
    --ty-duration-slow: 250ms;
    --ty-easing-standard: cubic-bezier(0.33, 0, 0.67, 1);
    --ty-motion-feedback-duration: var(--ty-duration-fast);
    --ty-motion-content-duration: var(--ty-duration-normal);
    --ty-motion-easing: var(--ty-easing-standard);

    --ty-elevation-1: 0 2px 4px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12);
    --ty-elevation-2: 0 8px 16px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12);
    --ty-overlay-elevation: var(--ty-elevation-2);

    --ty-control-radius: var(--ty-radius-2);
    --ty-control-border-width: var(--ty-stroke-thin);
    --ty-control-font-size: var(--ty-font-size-200);
    --ty-control-padding-inline: var(--ty-space-3);
    --ty-control-padding-block: var(--ty-space-1);
    --ty-control-gap: var(--ty-space-2);
    --ty-control-min-block-size: 2rem;

    --ty-layout-page-gutter: clamp(1rem, 3vw, 2rem);
    --ty-layout-card-gap: var(--ty-space-4);
    --ty-layout-section-gap: var(--ty-space-6);
    --ty-layout-content-measure: 72rem;

    background: var(--ty-color-background);
    color: var(--ty-color-text);
    font-family: var(--ty-font-family);
  }

  [data-design-system='fluent-web'][data-color-scheme='dark'] {
    color-scheme: dark;
    --ty-color-background: #1b1a19;
    --ty-color-on-background: #ffffff;
    --ty-color-surface: #292827;
    --ty-color-surface-hover: #323130;
    --ty-color-surface-pressed: #3b3a39;
    --ty-color-surface-elevated: #323130;
    --ty-color-text: #ffffff;
    --ty-color-text-muted: #d2d0ce;
    --ty-color-border: #605e5c;
    --ty-color-border-strong: #8a8886;
    --ty-color-accent: #479ef5;
    --ty-color-on-accent: #000000;
    --ty-color-accent-hover: #62abf5;
    --ty-color-accent-pressed: #2886de;
    --ty-color-danger: #ff99a4;
    --ty-focus-inner-color: #000000;
  }

  [data-design-system='fluent-web'] ::selection {
    background: #cfe4fa;
    color: #242424;
  }

  @media (forced-colors: active) {
    [data-design-system='fluent-web'] {
      --ty-color-background: Canvas;
      --ty-color-surface: Canvas;
      --ty-color-surface-hover: Canvas;
      --ty-color-surface-pressed: Canvas;
      --ty-color-text: CanvasText;
      --ty-color-text-muted: CanvasText;
      --ty-color-border: ButtonBorder;
      --ty-color-border-strong: ButtonText;
      --ty-color-accent: Highlight;
      --ty-color-on-accent: HighlightText;
      --ty-color-danger: Mark;
      --ty-focus-color: Highlight;
      --ty-focus-inner-color: Canvas;
      background: Canvas;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-design-system='fluent-web'] {
      --ty-motion-feedback-duration: 0ms;
      --ty-motion-content-duration: 0ms;
    }
  }
}

@layer product-components;

@layer product-components {
  [data-design-system='fluent-web'] tyui-button {
    --ty-button-radius: var(--ty-control-radius);
    --ty-button-min-block-size: var(--ty-control-min-block-size);
    --ty-button-padding-inline: var(--ty-space-3);
    --ty-button-padding-block: var(--ty-space-1);
    --ty-button-gap: var(--ty-space-2);
    --ty-button-font-size: var(--ty-font-size-200);
    --ty-button-font-weight: var(--ty-font-weight-semibold);
    --ty-button-line-height: var(--ty-line-height-200);
    --ty-button-border-width: var(--ty-stroke-thin);
  }

  [data-design-system='fluent-web'] tyui-button[size='small'] {
    --ty-button-min-block-size: 1.5rem;
    --ty-button-padding-inline: var(--ty-space-2);
    --ty-button-font-size: var(--ty-font-size-100);
    --ty-button-line-height: var(--ty-line-height-100);
  }

  [data-design-system='fluent-web'] tyui-button[size='large'] {
    --ty-button-min-block-size: 2.5rem;
    --ty-button-padding-inline: var(--ty-space-4);
    --ty-button-font-size: var(--ty-font-size-300);
    --ty-button-line-height: var(--ty-line-height-300);
  }

  [data-design-system='fluent-web'] tyui-button[appearance='primary'] {
    --ty-button-background: var(--ty-color-accent);
    --ty-button-background-hover: var(--ty-color-accent-hover);
    --ty-button-background-active: var(--ty-color-accent-pressed);
    --ty-button-foreground: var(--ty-color-on-accent);
    --ty-button-border-color: transparent;
    --ty-button-border-color-hover: transparent;
  }

  [data-design-system='fluent-web'] tyui-button[appearance='default'],
  [data-design-system='fluent-web'] tyui-button[appearance='secondary'] {
    --ty-button-background: var(--ty-color-surface);
    --ty-button-background-hover: var(--ty-color-surface-hover);
    --ty-button-background-active: var(--ty-color-surface-pressed);
    --ty-button-foreground: var(--ty-color-text);
    --ty-button-border-color: var(--ty-color-border);
    --ty-button-border-color-hover: var(--ty-color-border-strong);
  }

  [data-design-system='fluent-web'] tyui-button[appearance='outline'] {
    --ty-button-background: transparent;
    --ty-button-background-hover: var(--ty-color-surface-hover);
    --ty-button-background-active: var(--ty-color-surface-pressed);
    --ty-button-foreground: var(--ty-color-text);
    --ty-button-border-color: var(--ty-color-border);
    --ty-button-border-color-hover: var(--ty-color-border-strong);
  }

  [data-design-system='fluent-web'] tyui-button[appearance='subtle'] {
    --ty-button-background: transparent;
    --ty-button-background-hover: var(--ty-color-surface-hover);
    --ty-button-background-active: var(--ty-color-surface-pressed);
    --ty-button-foreground: var(--ty-color-text);
    --ty-button-border-color: transparent;
    --ty-button-border-color-hover: transparent;
  }

  [data-design-system='fluent-web'] tyui-button[appearance='transparent'] {
    --ty-button-background: transparent;
    --ty-button-background-hover: transparent;
    --ty-button-background-active: var(--ty-color-surface-pressed);
    --ty-button-foreground: var(--ty-color-text-muted);
    --ty-button-foreground-hover: var(--ty-color-text);
    --ty-button-border-color: transparent;
    --ty-button-border-color-hover: transparent;
  }

  [data-design-system='fluent-web'] tyui-button[shape='rounded'] {
    --ty-button-radius: var(--ty-radius-2);
  }

  [data-design-system='fluent-web'] tyui-button[shape='circular'] {
    --ty-button-radius: var(--ty-radius-pill);
  }

  [data-design-system='fluent-web'] tyui-button[shape='square'] {
    --ty-button-radius: var(--ty-radius-0);
  }

  [data-design-system='fluent-web'] tyui-input {
    --ty-input-background: var(--ty-color-surface);
    --ty-input-background-filled-darker: var(--ty-color-surface-hover);
    --ty-input-background-filled-lighter: var(--ty-color-surface);
    --ty-input-foreground: var(--ty-color-text);
    --ty-input-placeholder-color: var(--ty-color-text-muted);
    --ty-input-border-color: var(--ty-color-border);
    --ty-input-border-color-strong: var(--ty-color-border-strong);
    --ty-input-invalid-border-color: var(--ty-color-danger);
    --ty-input-focus-indicator-color: var(--ty-color-accent);
    --ty-input-radius: var(--ty-control-radius);
    --ty-input-min-block-size: var(--ty-control-min-block-size);
    --ty-input-padding-inline: var(--ty-space-3);
    --ty-input-padding-block: var(--ty-space-1);
    --ty-input-gap: var(--ty-space-2);
    --ty-input-font-size: var(--ty-font-size-200);
  }

  [data-design-system='fluent-web'] tyui-input[size='small'] {
    --ty-input-min-block-size: 1.5rem;
    --ty-input-padding-inline: var(--ty-space-2);
    --ty-input-font-size: var(--ty-font-size-100);
  }

  [data-design-system='fluent-web'] tyui-input[size='large'] {
    --ty-input-min-block-size: 2.5rem;
    --ty-input-padding-inline: var(--ty-space-4);
    --ty-input-font-size: var(--ty-font-size-300);
  }

  [data-design-system='fluent-web'] tyui-input::part(control) {
    background:
      linear-gradient(var(--ty-input-focus-indicator-color), var(--ty-input-focus-indicator-color))
        bottom center / 0 2px no-repeat,
      var(--ty-input-background);
    transition:
      background-size var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
      background-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
      border-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
      box-shadow var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease);
  }

  [data-design-system='fluent-web'] tyui-input:focus-within::part(control) {
    background-size:
      100% 2px,
      auto;
    border-block-end-color: var(--ty-input-focus-indicator-color);
    outline: 0;
    box-shadow: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-design-system='fluent-web'] tyui-input::part(control) {
      transition-duration: 0ms;
    }
  }

  @media (forced-colors: active) {
    [data-design-system='fluent-web'] tyui-input::part(control) {
      background:
        linear-gradient(Highlight, Highlight) bottom center / 0 2px no-repeat,
        Field;
    }

    [data-design-system='fluent-web'] tyui-input:focus-within::part(control) {
      background-size:
        100% 2px,
        auto;
      border-block-end-color: Highlight;
    }
  }

  [data-design-system='fluent-web'] tyui-input.ty-fluent-input-underline {
    --ty-input-radius: var(--ty-radius-0);
    --ty-input-background: transparent;
  }

  [data-design-system='fluent-web'] tyui-input.ty-fluent-input-underline::part(control) {
    border-block-start-color: transparent;
    border-inline-color: transparent;
    border-radius: 0;
  }

  [data-design-system='fluent-web'] tyui-input.ty-fluent-input-underline:hover::part(control) {
    border-block-end-color: var(--ty-color-border-strong);
  }

  [data-design-system='fluent-web'] tyui-checkbox {
    --ty-checkbox-foreground: var(--ty-color-text);
    --ty-checkbox-font-size: var(--ty-font-size-200);
    --ty-checkbox-line-height: var(--ty-line-height-200);
    --ty-checkbox-size: 1rem;
    --ty-checkbox-radius: var(--ty-radius-1);
    --ty-checkbox-gap: var(--ty-space-2);
    --ty-checkbox-border-color: var(--ty-color-border-strong);
    --ty-checkbox-border-color-hover: var(--ty-color-accent);
    --ty-checkbox-background: var(--ty-color-surface);
    --ty-checkbox-checked-background: var(--ty-color-accent);
    --ty-checkbox-checked-background-hover: var(--ty-color-accent-hover);
    --ty-checkbox-checked-background-active: var(--ty-color-accent-pressed);
    --ty-checkbox-checked-foreground: var(--ty-color-on-accent);
    --ty-checkbox-indeterminate-foreground: var(--ty-color-accent);
    --ty-checkbox-indeterminate-border-color: var(--ty-color-accent);
  }

  [data-design-system='fluent-web'] tyui-radio,
  [data-design-system='fluent-web'] tyui-radio-group {
    --ty-radio-foreground: var(--ty-color-text);
    --ty-radio-font-size: var(--ty-font-size-200);
    --ty-radio-line-height: var(--ty-line-height-200);
    --ty-radio-size: 1rem;
    --ty-radio-dot-size: 0.5rem;
    --ty-radio-gap: var(--ty-space-2);
    --ty-radio-border-color: var(--ty-color-border-strong);
    --ty-radio-checked-color: var(--ty-color-accent);
    --ty-radio-group-foreground: var(--ty-color-text);
    --ty-radio-group-label-color: var(--ty-color-text);
    --ty-radio-group-gap: var(--ty-space-2);
    --ty-radio-group-inline-gap: var(--ty-space-4);
  }

  [data-design-system='fluent-web'] .ty-fluent-panel {
    box-sizing: border-box;
    color: var(--ty-color-text);
    background: var(--ty-color-surface);
    border: var(--ty-stroke-thin) solid var(--ty-color-border);
    border-radius: var(--ty-radius-3);
    box-shadow: none;
  }

  [data-design-system='fluent-web'] .ty-fluent-panel[data-elevation='raised'] {
    box-shadow: var(--ty-elevation-1);
  }

  [data-design-system='fluent-web'] .ty-fluent-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ty-space-2);
    align-items: center;
  }

  [data-design-system='fluent-web'] .ty-fluent-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--ty-space-4);
  }

  [data-design-system='fluent-web'] .ty-fluent-caption {
    color: var(--ty-color-text-muted);
    font-size: var(--ty-font-size-100);
    line-height: var(--ty-line-height-100);
  }

  [data-design-system='fluent-web'] .ty-fluent-title {
    color: var(--ty-color-text);
    font-size: var(--ty-font-size-400);
    font-weight: var(--ty-font-weight-semibold);
    line-height: var(--ty-line-height-400);
  }
}