npm - ui-style-kit-css - Versions diffs - 1.2.1 → 2.0.1 - Mend

ui-style-kit-css 1.2.1 → 2.0.1

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 (30) hide show

package/CHANGELOG.md +38 -119
package/CONTRIBUTING.md +25 -0
package/README.md +206 -150
package/SECURITY.md +18 -0
package/STYLE-MAP.md +60 -0
package/demo/index.html +1124 -0
package/dist/ui-style-kit.css +3077 -8115
package/dist/ui-style-kit.min.css +1 -7
package/dist/ui-style-kit.with-bridge.css +5861 -0
package/dist/ui-style-kit.with-bridge.min.css +1 -0
package/docs/PUBLISHING.md +28 -0
package/docs/STYLE-GUIDE.md +30 -0
package/docs/TOKENS.md +276 -0
package/package.json +90 -128
package/styles/bauhaus.css +145 -702
package/styles/bento.css +145 -701
package/styles/brutalism.css +156 -640
package/styles/cyberpunk.css +149 -639
package/styles/interactive-surface-bridge.css +147 -311
package/styles/maximalist.css +146 -702
package/styles/minimal-saas.css +141 -701
package/styles/native-elements.css +374 -0
package/styles/neumorphism.css +147 -702
package/styles/retro-glass.css +152 -642
package/styles/retrofuturism.css +147 -702
package/styles/tactile.css +145 -701
package/styles/theme-colors.css +787 -0
package/styles/y2k.css +143 -636
package/CODE_OF_CONDUCT.md +0 -64
package/index.html +0 -234

package/CODE_OF_CONDUCT.md DELETED Viewed

@@ -1,64 +0,0 @@
-# Code of Conduct
-## Our Pledge
-We are committed to making participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity or expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
-We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
-## Our Standards
-Examples of behavior that contributes to a positive environment include:
-- Using welcoming and inclusive language
-- Respecting different viewpoints and experiences
-- Giving and accepting constructive feedback
-- Focusing on what is best for the community and the project
-- Showing empathy and kindness toward other community members
-Examples of unacceptable behavior include:
-- Sexualized language or imagery, and unwelcome sexual attention or advances
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email address, without explicit permission
-- Other conduct that could reasonably be considered inappropriate in a professional setting
-## Enforcement Responsibilities
-Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to behavior they deem inappropriate, threatening, offensive, or harmful.
-Maintainers may remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
-## Scope
-This Code of Conduct applies within all project spaces and also applies when an individual is officially representing the project in public spaces. Examples include using an official project email address, posting via official social channels, or acting as an appointed representative at events.
-## Reporting
-If you experience or witness unacceptable behavior, report it to the maintainers as soon as possible.
-- Preferred contact: [Foscat](https://github.com/Foscat) or [Email Me](mailto:fosterkyle6456@gmail.com)
-- Alternative: open a private report through repository maintainers on GitHub
-All reports will be reviewed promptly and handled with care and discretion. Maintainers will respect the privacy and security of the reporter to the extent possible.
-## Enforcement Guidelines
-Maintainers may follow these Community Impact Guidelines when determining consequences:
-1. Correction
-For minor or first-time issues, maintainers may provide a private written warning with clarification of expected behavior.
-2. Warning
-For a violation involving a single incident or a pattern of behavior, maintainers may issue a warning with clear consequences for continued behavior.
-3. Temporary Ban
-For serious or repeated violations, maintainers may impose a temporary ban from community interaction and project participation.
-4. Permanent Ban
-For sustained inappropriate behavior, harassment, or threats to community safety, maintainers may impose a permanent ban from any sort of public interaction within the project.
-## Attribution
-This Code of Conduct is informed by the Contributor Covenant and common open source community moderation practices.

package/index.html DELETED Viewed

@@ -1,234 +0,0 @@
-<!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="styles/minimal-saas.css" />
-  <link rel="stylesheet" href="styles/bento.css" />
-  <link rel="stylesheet" href="styles/maximalist.css" />
-  <link rel="stylesheet" href="styles/bauhaus.css" />
-  <link rel="stylesheet" href="styles/tactile.css" />
-  <link rel="stylesheet" href="styles/neumorphism.css" />
-  <link rel="stylesheet" href="styles/retrofuturism.css" />
-  <link rel="stylesheet" href="styles/brutalism.css" />
-  <link rel="stylesheet" href="styles/cyberpunk.css" />
-  <link rel="stylesheet" href="styles/y2k.css" />
-  <link rel="stylesheet" href="styles/retro-glass.css" />
-  <link rel="icon" href="logo.png" type="image/png" sizes="1254x1254" />
-  <link rel="apple-touch-icon" href="logo.png" />
-  <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/social-card.png" />
-  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
-  <meta property="og:image:type" content="image/png" />
-  <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/social-card.png" />
-  <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>