UI Library

Shuimo UI Vue

GitHub - shuimo.design

水墨(Shuimo) Component Library following traditional Chinese style.

AgnosticUI CSS Guiko React Svelte Angular

Batim

paragraph with pouet dedans

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Svelte, Astro, and Angular (experimental).

GitHub

AgnosticUI is using pure CSS Custom Properties for theming

For example for dark mode:

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --agnostic-warning-border-accent: var(
      --agnostic-warning-border-accent-modedark
    );
    --agnostic-warning-border: var(--agnostic-warning-border-modedark);
    --agnostic-warning-light: var(--agnostic-warning-light-modedark);
    --agnostic-warning-dark: var(--agnostic-warning-dark-modedark);
    --agnostic-secondary-hover: var(--agnostic-secondary-hover-modedark);
    --agnostic-secondary: var(--agnostic-secondary-modedark);
    --agnostic-primary-light: var(--agnostic-primary-light-modedark);
    --agnostic-primary-dark: var(--agnostic-primary-dark-modedark);
    --agnostic-primary-border: var(--agnostic-primary-border-modedark);
    --agnostic-primary-hover: var(--agnostic-primary-hover-modedark);
    --agnostic-primary: var(--agnostic-primary-modedark);
    --agnostic-light: var(--agnostic-light-modedark);
    --agnostic-dark: var(--agnostic-dark-modedark);
    --agnostic-gray-dark: var(--agnostic-gray-dark-modedark);
    --agnostic-gray-mid-dark: var(--agnostic-gray-mid-dark-modedark);
    --agnostic-gray-mid: var(--agnostic-gray-mid-modedark);
    --agnostic-gray-light: var(--agnostic-gray-light-modedark);
    --agnostic-gray-extra-light: var(--agnostic-gray-extra-light-modedark);
    --agnostic-error: var(--agnostic-error-modedark);
    --agnostic-error-light: var(--agnostic-error-light-modedark);
    --agnostic-error-dark: var(--agnostic-error-dark-modedark);
    --agnostic-error-border: var(--agnostic-error-border-modedark);
    --agnostic-disabled-color: var(--agnostic-gray-dark-modedark);
    --agnostic-disabled-bg: var(--agnostic-gray-light-modedark);
    --agnostic-action-border: var(--agnostic-action-border-modedark);
    --agnostic-action-light: var(--agnostic-action-light-modedark);
    --agnostic-action-dark: var(--agnostic-action-dark-modedark);
    --agnostic-action-hover: var(--agnostic-action-hover-modedark);
    --agnostic-action: var(--agnostic-action-modedark);
  }
}

See all color modes in GitHub

vanilla-extract CSS

Zero-runtime Stylesheets-in-TypeScript.

Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.

Example

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue',
  },
  font: {
    body: 'arial',
  },
});

export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10,
});

Later:

import { themeClass, exampleStyle } from './styles.css.ts';

document.write(`
  <section class="${themeClass}">
    <h1 class="${exampleStyle}">Hello world!</h1>
  </section>
`);