npm - ui-style-kit-css - Versions diffs - 1.0.0 - Mend

ui-style-kit-css 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +36 -0
package/CODE_OF_CONDUCT.md +64 -0
package/LICENSE +21 -0
package/README.md +222 -0
package/dist/ui-style-kit.css +10443 -0
package/dist/ui-style-kit.min.css +7 -0
package/index.html +224 -0
package/package.json +186 -0
package/styles/bauhaus.css +978 -0
package/styles/bento.css +979 -0
package/styles/brutalism.css +911 -0
package/styles/cyberpunk.css +858 -0
package/styles/maximalist.css +978 -0
package/styles/minimal-saas.css +978 -0
package/styles/neumorphism.css +1007 -0
package/styles/retro-glass.css +840 -0
package/styles/retrofuturism.css +1015 -0
package/styles/tactile.css +977 -0
package/styles/y2k.css +839 -0

package/index.html ADDED Viewed

@@ -0,0 +1,224 @@
+<!doctype html>
+<html lang="en-US">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>UI Style Kit CSS Demo | 11 UI Systems, 10 Themes, Light/Dark/Contrast</title>
+  <meta
+    name="description"
+    content="Interactive demo for UI Style Kit CSS: a CSS-only style library with 11 visual UI systems, 10 shared color themes, light/dark/contrast modes, and accessibility-focused native HTML coverage."
+  />
+  <meta
+    name="keywords"
+    content="ui style kit, css design system, css theme library, ui components css, accessible css, minimal saas, bento ui, neumorphism, cyberpunk css, y2k ui"
+  />
+  <meta name="title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes, Light/Dark/Contrast" />
+  <meta name="subject" content="CSS UI style library demo" />
+  <meta name="copyright" content="Kyle Foster" />
+  <meta name="url" content="https://foscat.github.io/ui-style-kit-css/" />
+  <meta name="identifier-URL" content="https://foscat.github.io/ui-style-kit-css/" />
+  <meta name="category" content="technology" />
+  <meta name="coverage" content="Worldwide" />
+  <meta name="target" content="all" />
+  <meta name="author" content="Kyle Foster" />
+  <meta name="creator" content="Kyle Foster" />
+  <meta name="publisher" content="UI Style Kit CSS" />
+  <meta name="application-name" content="UI Style Kit CSS Demo" />
+  <meta name="generator" content="UI Style Kit CSS" />
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+  <meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+  <meta name="bingbot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+  <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
+  <meta name="rating" content="general" />
+  <meta name="distribution" content="global" />
+  <meta name="language" content="English" />
+  <meta http-equiv="content-language" content="en-US" />
+  <meta name="revisit-after" content="7 days" />
+  <meta name="HandheldFriendly" content="true" />
+  <meta name="apple-touch-fullscreen" content="yes" />
+  <meta name="color-scheme" content="light dark" />
+  <meta name="theme-color" content="#0b0f19" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7ff" />
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0f19" />
+  <link rel="canonical" href="https://foscat.github.io/ui-style-kit-css/" />
+  <link rel="shortlink" href="https://foscat.github.io/ui-style-kit-css/" />
+  <link rel="alternate" href="https://foscat.github.io/ui-style-kit-css/" hreflang="en" />
+  <link rel="alternate" href="https://foscat.github.io/ui-style-kit-css/" hreflang="x-default" />
+  <link rel="license" href="https://github.com/Foscat/ui-style-kit-css/blob/main/LICENSE" />
+  <link rel="manifest" href="site.webmanifest" />
+  <link rel="stylesheet" href="dist/ui-style-kit.css" />
+  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="favicon.svg" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-title" content="UI Style Kit CSS" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="msapplication-TileColor" content="#0b0f19" />
+  <meta name="msapplication-config" content="browserconfig.xml" />
+  <meta name="msapplication-starturl" content="/ui-style-kit-css/" />
+  <meta name="msapplication-navbutton-color" content="#0b0f19" />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:site_name" content="UI Style Kit CSS" />
+  <meta property="og:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
+  <meta
+    property="og:description"
+    content="Try every UI Style Kit CSS visual system, switch shared themes and modes, and preview native element coverage."
+  />
+  <meta property="og:url" content="https://foscat.github.io/ui-style-kit-css/" />
+  <meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
+  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
+  <meta property="og:image:type" content="image/svg+xml" />
+  <meta property="og:image:alt" content="UI Style Kit CSS social preview image" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
+  <meta
+    name="twitter:description"
+    content="CSS-only UI style library demo with multi-style switching, shared themes, and accessibility-focused native HTML coverage."
+  />
+  <meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
+  <meta name="twitter:image:alt" content="UI Style Kit CSS social preview image" />
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@graph": [
+        {
+          "@type": "WebSite",
+          "name": "UI Style Kit CSS",
+          "url": "https://foscat.github.io/ui-style-kit-css/",
+          "description": "A CSS-only UI style library with 11 visual systems, 10 themes, and light/dark/contrast modes.",
+          "inLanguage": "en-US",
+          "publisher": {
+            "@type": "Person",
+            "name": "Kyle Foster"
+          }
+        },
+        {
+          "@type": "SoftwareSourceCode",
+          "name": "UI Style Kit CSS",
+          "codeRepository": "https://github.com/Foscat/ui-style-kit-css",
+          "url": "https://foscat.github.io/ui-style-kit-css/",
+          "license": "https://github.com/Foscat/ui-style-kit-css/blob/main/LICENSE",
+          "programmingLanguage": "CSS",
+          "description": "CSS-only visual style and color theme library for modern web interfaces.",
+          "keywords": "css, ui, style-kit, design-system, accessibility, themes"
+        }
+      ]
+    }
+  </script>
+  <style>
+    .demo-controls { position: sticky; top: 0; z-index: 1000; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; padding: 1rem; background: Canvas; color: CanvasText; border-bottom: 1px solid color-mix(in srgb, CanvasText 20%, transparent); }
+    .demo-controls label { display: grid; gap: .25rem; font: 700 .85rem system-ui; }
+    .demo-controls select { min-height: 2.5rem; padding: .5rem; font: inherit; }
+  </style>
+</head>
+<body data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="light">
+  <a id="skip" class="saas-skip-link" href="#main">Skip to content</a>
+  <aside class="demo-controls" aria-label="Demo controls">
+    <label>UI Style<select id="uiSelect"><option value="minimal-saas" data-prefix="saas">Minimal SaaS</option><option value="bento" data-prefix="bento">Bento UI</option><option value="maximalist" data-prefix="max">Maximalist / Playful</option><option value="bauhaus" data-prefix="bau">Bauhaus / Swiss Modern</option><option value="tactile" data-prefix="tactile">Skeuomorphic / Tactile</option><option value="neumorphism" data-prefix="neo">Neumorphism</option><option value="retrofuturism" data-prefix="retro">Retrofuturism</option><option value="brutalism" data-prefix="brutal">Brutalism</option><option value="cyberpunk" data-prefix="cyber">Cyberpunk</option><option value="y2k" data-prefix="y2k">Y2K</option><option value="retro-glass" data-prefix="rg">Retro Glass</option></select></label>
+    <label>Color Theme<select id="themeSelect"><option value="midnight-gold">midnight-gold</option><option value="ocean-steel">ocean-steel</option><option value="forest-moss">forest-moss</option><option value="sunset-ember">sunset-ember</option><option value="royal-plum">royal-plum</option><option value="graphite-cyan">graphite-cyan</option><option value="desert-sage">desert-sage</option><option value="rose-quartz">rose-quartz</option><option value="cyber-lime">cyber-lime</option><option value="arctic-indigo">arctic-indigo</option></select></label>
+    <label>Mode<select id="modeSelect"><option value="light">light</option><option value="dark">dark</option><option value="contrast">contrast</option></select></label>
+  </aside>
+  <main id="main"></main>
+  <script>
+    const stylePrefixes = {"minimal-saas": "saas", "bento": "bento", "maximalist": "max", "bauhaus": "bau", "tactile": "tactile", "neumorphism": "neo", "retrofuturism": "retro", "brutalism": "brutal", "cyberpunk": "cyber", "y2k": "y2k", "retro-glass": "rg"};
+    const styleTitles = {"minimal-saas": "Minimal SaaS", "bento": "Bento UI", "maximalist": "Maximalist / Playful", "bauhaus": "Bauhaus / Swiss Modern", "tactile": "Skeuomorphic / Tactile", "neumorphism": "Neumorphism", "retrofuturism": "Retrofuturism", "brutalism": "Brutalism", "cyberpunk": "Cyberpunk", "y2k": "Y2K", "retro-glass": "Retro Glass"};
+    const uiSelect = document.getElementById('uiSelect');
+    const themeSelect = document.getElementById('themeSelect');
+    const modeSelect = document.getElementById('modeSelect');
+    const main = document.getElementById('main');
+    const skip = document.getElementById('skip');
+    function render() {
+      const ui = uiSelect.value;
+      const p = stylePrefixes[ui];
+      const title = styleTitles[ui];
+      document.body.dataset.ui = ui;
+      document.body.dataset.theme = themeSelect.value;
+      document.body.dataset.mode = modeSelect.value;
+      skip.className = `${p}-skip-link`;
+      main.innerHTML = `
+        <section class="${p}-page">
+          <div class="${p}-container ${p}-stack">
+            <nav class="${p}-nav" aria-label="Primary">
+              <a class="${p}-nav-link is-active" href="#">Overview</a>
+              <a class="${p}-nav-link" href="#components">Components</a>
+              <a class="${p}-nav-link" href="#native">Native HTML</a>
+              <a class="${p}-nav-link" href="#table">Table</a>
+            </nav>
+            <article class="${p}-card ${p}-hover-lift">
+              <p class="${p}-kicker">${title}</p>
+              <h1 class="${p}-title">UI Style Kit CSS</h1>
+              <p class="${p}-subtitle">A CSS-only style kit with multiple UI systems, 10 shared color themes, light/dark/contrast modes, and native HTML coverage.</p>
+              <div class="${p}-cluster">
+                <button class="${p}-button ${p}-button-primary">Primary</button>
+                <button class="${p}-button ${p}-button-secondary">Secondary</button>
+                <button class="${p}-button">Neutral</button>
+                <button class="${p}-icon-button" aria-label="Icon button">&#9733;</button>
+                <span class="${p}-badge ${p}-badge-primary">Primary</span>
+                <span class="${p}-badge ${p}-badge-warning">Warning</span>
+              </div>
+            </article>
+            <section id="components" class="${p}-grid">
+              <article class="${p}-card">
+                <p class="${p}-kicker">Controls</p>
+                <h2 class="${p}-heading">Form Components</h2>
+                <label class="${p}-field"><span class="${p}-label">Project Name</span><input class="${p}-input" placeholder="Golden Goose Website" /></label>
+                <label class="${p}-field"><span class="${p}-label">Message</span><textarea class="${p}-textarea" placeholder="Write something useful..."></textarea></label>
+                <label class="${p}-switch"><input type="checkbox" checked><span class="${p}-switch-track"><span class="${p}-switch-thumb"></span></span><span>Enabled</span></label>
+              </article>
+              <article class="${p}-card">
+                <p class="${p}-kicker">Status</p>
+                <h2 class="${p}-heading">Alerts + Progress</h2>
+                <div class="${p}-alert ${p}-alert-success"><p class="${p}-alert-title">Success</p><p class="${p}-alert-body">The package stylesheet is loaded.</p></div>
+                <div class="${p}-progress" aria-label="Progress"><div class="${p}-progress-bar" style="--${p}-progress-value: 68%"></div></div>
+                <div class="${p}-cluster"><span class="${p}-badge ${p}-badge-success">Success</span><span class="${p}-badge ${p}-badge-danger">Danger</span></div>
+              </article>
+              <article class="${p}-well">
+                <h2 class="${p}-heading">Surface Well</h2>
+                <p class="${p}-copy">This inset/soft surface demonstrates secondary containers and grouped content.</p>
+                <hr class="${p}-divider" />
+                <p><code>data-ui="${ui}"</code> <code>data-theme="${themeSelect.value}"</code> <code>data-mode="${modeSelect.value}"</code></p>
+              </article>
+            </section>
+            <section id="native" class="${p}-card">
+              <h2>Native HTML Coverage</h2>
+              <p>This paragraph, <a href="#native">link</a>, <mark>marked text</mark>, <code>inline code</code>, <kbd>Ctrl</kbd> + <kbd>S</kbd>, and <abbr title="Accessible Rich Internet Applications">ARIA</abbr> abbreviation are styled without utility classes.</p>
+              <blockquote>CSS can improve presentation accessibility, but semantic HTML and keyboard-safe JavaScript are still required.</blockquote>
+              <ul><li>Unordered list item</li><li>Another item</li></ul>
+              <ol><li>Ordered list item</li><li>Another item</li></ol>
+              <details><summary>Details and summary</summary><p>Native disclosure widgets are covered too.</p></details>
+              <fieldset><legend>Native Fieldset</legend><label>Email <input type="email" placeholder="name@example.com"></label><br><label><input type="checkbox" checked> Receive updates</label><br><label><input type="radio" name="demo-radio" checked> Option A</label></fieldset>
+              <label>Range <input type="range" value="62"></label>
+              <progress value="72" max="100">72%</progress>
+              <meter value="0.68">68%</meter>
+            </section>
+            <section id="table" class="${p}-table-wrap">
+              <table class="${p}-table">
+                <caption>Component coverage example</caption>
+                <thead><tr><th>Element</th><th>State</th><th>Coverage</th></tr></thead>
+                <tbody>
+                  <tr><td>Button</td><td>Hover / active / disabled</td><td>Class + native</td></tr>
+                  <tr><td>Input</td><td>Focus / invalid / disabled</td><td>Class + native</td></tr>
+                  <tr><td>Table</td><td>Caption / header / hover</td><td>Class + native</td></tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
+        </section>`;
+    }
+    uiSelect.addEventListener('change', render);
+    themeSelect.addEventListener('change', render);
+    modeSelect.addEventListener('change', render);
+    render();
+  </script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,186 @@
+{
+  "name": "ui-style-kit-css",
+  "version": "1.0.0",
+  "description": "A CSS-only UI style and color theme kit with 11 visual systems, 10 shared color schemes, light/dark/contrast modes, and accessibility-focused native HTML coverage.",
+  "style": "dist/ui-style-kit.css",
+  "main": "dist/ui-style-kit.css",
+  "unpkg": "dist/ui-style-kit.min.css",
+  "jsdelivr": "dist/ui-style-kit.min.css",
+  "files": [
+    "dist",
+    "styles",
+    "index.html",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "CODE_OF_CONDUCT.md"
+  ],
+  "keywords": [
+    "css",
+    "ui",
+    "themes",
+    "style-kit",
+    "design-system",
+    "accessibility",
+    "color-themes",
+    "bento",
+    "saas",
+    "glassmorphism",
+    "neumorphism",
+    "cyberpunk",
+    "y2k",
+    "brutalism",
+    "retrofuturism"
+  ],
+  "scripts": {
+    "lint": "npm run lint:css",
+    "lint:css": "stylelint \"styles/**/*.css\"",
+    "lint:css:fix": "stylelint \"styles/**/*.css\" --fix"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.18.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./dist/ui-style-kit.css",
+    "./css": "./dist/ui-style-kit.css",
+    "./min": "./dist/ui-style-kit.min.css",
+    "./styles/minimal-saas": "./styles/minimal-saas.css",
+    "./minimal-saas": "./styles/minimal-saas.css",
+    "./styles/bento": "./styles/bento.css",
+    "./bento": "./styles/bento.css",
+    "./styles/maximalist": "./styles/maximalist.css",
+    "./maximalist": "./styles/maximalist.css",
+    "./styles/bauhaus": "./styles/bauhaus.css",
+    "./bauhaus": "./styles/bauhaus.css",
+    "./styles/tactile": "./styles/tactile.css",
+    "./tactile": "./styles/tactile.css",
+    "./styles/neumorphism": "./styles/neumorphism.css",
+    "./neumorphism": "./styles/neumorphism.css",
+    "./styles/retrofuturism": "./styles/retrofuturism.css",
+    "./retrofuturism": "./styles/retrofuturism.css",
+    "./styles/brutalism": "./styles/brutalism.css",
+    "./brutalism": "./styles/brutalism.css",
+    "./styles/cyberpunk": "./styles/cyberpunk.css",
+    "./cyberpunk": "./styles/cyberpunk.css",
+    "./styles/y2k": "./styles/y2k.css",
+    "./y2k": "./styles/y2k.css",
+    "./styles/retro-glass": "./styles/retro-glass.css",
+    "./retro-glass": "./styles/retro-glass.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Foscat/ui-style-kit-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Foscat/ui-style-kit-css/issues"
+  },
+  "homepage": "https://github.com/Foscat/ui-style-kit-css#readme",
+  "devDependencies": {
+    "stylelint": "^16.24.0"
+  },
+  "dependencies": {
+    "ajv": "~8.20.0",
+    "ansi-regex": "~5.0.1",
+    "ansi-styles": "~4.3.0",
+    "argparse": "~2.0.1",
+    "array-union": "~2.1.0",
+    "astral-regex": "~2.0.0",
+    "balanced-match": "~2.0.0",
+    "braces": "~3.0.3",
+    "cacheable": "~2.3.5",
+    "callsites": "~3.1.0",
+    "color-convert": "~2.0.1",
+    "color-name": "~1.1.4",
+    "colord": "~2.9.3",
+    "cosmiconfig": "~9.0.1",
+    "css-functions-list": "~3.3.3",
+    "css-tree": "~3.2.1",
+    "cssesc": "~3.0.0",
+    "debug": "~4.4.3",
+    "dir-glob": "~3.0.1",
+    "emoji-regex": "~8.0.0",
+    "env-paths": "~2.2.1",
+    "error-ex": "~1.3.4",
+    "fast-deep-equal": "~3.1.3",
+    "fast-glob": "~3.3.3",
+    "fast-uri": "~3.1.2",
+    "fastest-levenshtein": "~1.0.16",
+    "fastq": "~1.20.1",
+    "file-entry-cache": "~11.1.3",
+    "fill-range": "~7.1.1",
+    "flat-cache": "~6.1.22",
+    "flatted": "~3.4.2",
+    "glob-parent": "~5.1.2",
+    "global-modules": "~2.0.0",
+    "global-prefix": "~3.0.0",
+    "globby": "~11.1.0",
+    "globjoin": "~0.1.4",
+    "has-flag": "~4.0.0",
+    "hashery": "~1.5.1",
+    "hookified": "~1.15.1",
+    "html-tags": "~3.3.1",
+    "ignore": "~7.0.5",
+    "import-fresh": "~3.3.1",
+    "imurmurhash": "~0.1.4",
+    "ini": "~1.3.8",
+    "is-arrayish": "~0.2.1",
+    "is-extglob": "~2.1.1",
+    "is-fullwidth-code-point": "~3.0.0",
+    "is-glob": "~4.0.3",
+    "is-number": "~7.0.0",
+    "is-plain-object": "~5.0.0",
+    "isexe": "~2.0.0",
+    "js-tokens": "~4.0.0",
+    "js-yaml": "~4.1.1",
+    "json-parse-even-better-errors": "~2.3.1",
+    "json-schema-traverse": "~1.0.0",
+    "keyv": "~5.6.0",
+    "kind-of": "~6.0.3",
+    "known-css-properties": "~0.37.0",
+    "lines-and-columns": "~1.2.4",
+    "lodash.truncate": "~4.4.2",
+    "mathml-tag-names": "~2.1.3",
+    "mdn-data": "~2.27.1",
+    "meow": "~13.2.0",
+    "merge2": "~1.4.1",
+    "micromatch": "~4.0.8",
+    "ms": "~2.1.3",
+    "nanoid": "~3.3.12",
+    "normalize-path": "~3.0.0",
+    "parent-module": "~1.0.1",
+    "parse-json": "~5.2.0",
+    "path-type": "~4.0.0",
+    "picocolors": "~1.1.1",
+    "picomatch": "~2.3.2",
+    "postcss": "~8.5.15",
+    "postcss-resolve-nested-selector": "~0.1.6",
+    "postcss-safe-parser": "~7.0.1",
+    "postcss-selector-parser": "~7.1.1",
+    "postcss-value-parser": "~4.2.0",
+    "qified": "~0.10.1",
+    "queue-microtask": "~1.2.3",
+    "require-from-string": "~2.0.2",
+    "resolve-from": "~5.0.0",
+    "reusify": "~1.1.0",
+    "run-parallel": "~1.2.0",
+    "signal-exit": "~4.1.0",
+    "slash": "~3.0.0",
+    "slice-ansi": "~4.0.0",
+    "source-map-js": "~1.2.1",
+    "string-width": "~4.2.3",
+    "strip-ansi": "~6.0.1",
+    "supports-color": "~7.2.0",
+    "supports-hyperlinks": "~3.2.0",
+    "svg-tags": "~1.0.0",
+    "table": "~6.9.0",
+    "to-regex-range": "~5.0.1",
+    "util-deprecate": "~1.0.2",
+    "which": "~1.3.1",
+    "write-file-atomic": "~5.0.1"
+  },
+  "author": "Foscat"
+}