@toyu-ui/solid/design/plain.css

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

@layer tokens, product-theme, product-components;

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

    --ty-design-name: plain;
    --ty-color-background: Canvas;
    --ty-color-on-background: CanvasText;
    --ty-color-surface: Canvas;
    --ty-color-surface-hover: color-mix(in srgb, CanvasText 6%, Canvas);
    --ty-color-surface-pressed: color-mix(in srgb, CanvasText 10%, Canvas);
    --ty-color-surface-elevated: Canvas;
    --ty-color-text: CanvasText;
    --ty-color-text-muted: color-mix(in srgb, CanvasText 70%, Canvas);
    --ty-color-border: color-mix(in srgb, CanvasText 24%, Canvas);
    --ty-color-border-strong: color-mix(in srgb, CanvasText 44%, Canvas);
    --ty-color-accent: LinkText;
    --ty-color-on-accent: Canvas;
    --ty-color-danger: Mark;
    --ty-color-on-danger: Canvas;

    --ty-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 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.5rem;
    --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.5rem;
    --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: Highlight;

    --ty-duration-fast: 100ms;
    --ty-duration-normal: 150ms;
    --ty-duration-slow: 240ms;
    --ty-easing-standard: ease;
    --ty-motion-feedback-duration: var(--ty-duration-fast);
    --ty-motion-content-duration: var(--ty-duration-normal);
    --ty-motion-easing: var(--ty-easing-standard);

    --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='plain'][data-color-scheme='light'] {
    color-scheme: light;
  }

  [data-design-system='plain'][data-color-scheme='dark'] {
    color-scheme: dark;
  }
}

@layer product-components {
  [data-design-system='plain'] tyui-button,
  [data-design-system='plain'] tyui-input,
  [data-design-system='plain'] tyui-checkbox,
  [data-design-system='plain'] tyui-radio,
  [data-design-system='plain'] tyui-radio-group {
    font-family: var(--ty-font-family);
  }

  [data-design-system='plain'] 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-control-padding-inline);
    --ty-button-padding-block: var(--ty-control-padding-block);
    --ty-button-gap: var(--ty-control-gap);
    --ty-button-font-size: var(--ty-control-font-size);
    --ty-button-border-width: var(--ty-control-border-width);
  }

  [data-design-system='plain'] tyui-input {
    --ty-input-radius: var(--ty-control-radius);
    --ty-input-min-block-size: var(--ty-control-min-block-size);
    --ty-input-padding-inline: var(--ty-control-padding-inline);
    --ty-input-padding-block: var(--ty-control-padding-block);
    --ty-input-gap: var(--ty-control-gap);
    --ty-input-font-size: var(--ty-control-font-size);
  }
}