ui-style-kit-css 1.2.1 → 1.2.2
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.
- package/CHANGELOG.md +18 -126
- package/CONTRIBUTING.md +24 -0
- package/README.md +94 -154
- package/SECURITY.md +18 -0
- package/STYLE-MAP.md +36 -0
- package/{index.html → demo/index.html} +6 -119
- package/dist/ui-style-kit.css +397 -28
- package/dist/ui-style-kit.min.css +1 -7
- package/docs/PUBLISHING.md +28 -0
- package/docs/STYLE-GUIDE.md +28 -0
- package/docs/TOKENS.md +71 -0
- package/package.json +78 -128
- package/styles/bauhaus.css +5 -2
- package/styles/bento.css +5 -2
- package/styles/brutalism.css +83 -2
- package/styles/cyberpunk.css +83 -2
- package/styles/maximalist.css +5 -2
- package/styles/minimal-saas.css +5 -2
- package/styles/neumorphism.css +5 -2
- package/styles/retro-glass.css +83 -2
- package/styles/retrofuturism.css +5 -2
- package/styles/tactile.css +5 -2
- package/styles/y2k.css +83 -2
- package/CODE_OF_CONDUCT.md +0 -64
|
@@ -1,123 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
<html lang="en
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<meta
|
|
6
|
-
<
|
|
7
|
-
<
|
|
8
|
-
<meta
|
|
9
|
-
name="description"
|
|
10
|
-
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."
|
|
11
|
-
/>
|
|
12
|
-
<meta
|
|
13
|
-
name="keywords"
|
|
14
|
-
content="ui style kit, css design system, css theme library, ui components css, accessible css, minimal saas, bento ui, neumorphism, cyberpunk css, y2k ui"
|
|
15
|
-
/>
|
|
16
|
-
<meta name="title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes, Light/Dark/Contrast" />
|
|
17
|
-
<meta name="subject" content="CSS UI style library demo" />
|
|
18
|
-
<meta name="copyright" content="Kyle Foster" />
|
|
19
|
-
<meta name="url" content="https://foscat.github.io/ui-style-kit-css/" />
|
|
20
|
-
<meta name="identifier-URL" content="https://foscat.github.io/ui-style-kit-css/" />
|
|
21
|
-
<meta name="category" content="technology" />
|
|
22
|
-
<meta name="coverage" content="Worldwide" />
|
|
23
|
-
<meta name="target" content="all" />
|
|
24
|
-
<meta name="author" content="Kyle Foster" />
|
|
25
|
-
<meta name="creator" content="Kyle Foster" />
|
|
26
|
-
<meta name="publisher" content="UI Style Kit CSS" />
|
|
27
|
-
<meta name="application-name" content="UI Style Kit CSS Demo" />
|
|
28
|
-
<meta name="generator" content="UI Style Kit CSS" />
|
|
29
|
-
<meta name="referrer" content="strict-origin-when-cross-origin" />
|
|
30
|
-
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
|
|
31
|
-
<meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
|
|
32
|
-
<meta name="bingbot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
|
|
33
|
-
<meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
|
|
34
|
-
<meta name="rating" content="general" />
|
|
35
|
-
<meta name="distribution" content="global" />
|
|
36
|
-
<meta name="language" content="English" />
|
|
37
|
-
<meta http-equiv="content-language" content="en-US" />
|
|
38
|
-
<meta name="revisit-after" content="7 days" />
|
|
39
|
-
<meta name="HandheldFriendly" content="true" />
|
|
40
|
-
<meta name="apple-touch-fullscreen" content="yes" />
|
|
41
|
-
<meta name="color-scheme" content="light dark" />
|
|
42
|
-
<meta name="theme-color" content="#0b0f19" />
|
|
43
|
-
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7ff" />
|
|
44
|
-
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0f19" />
|
|
45
|
-
<link rel="canonical" href="https://foscat.github.io/ui-style-kit-css/" />
|
|
46
|
-
<link rel="shortlink" href="https://foscat.github.io/ui-style-kit-css/" />
|
|
47
|
-
<link rel="alternate" href="https://foscat.github.io/ui-style-kit-css/" hreflang="en" />
|
|
48
|
-
<link rel="alternate" href="https://foscat.github.io/ui-style-kit-css/" hreflang="x-default" />
|
|
49
|
-
<link rel="license" href="https://github.com/Foscat/ui-style-kit-css/blob/main/LICENSE" />
|
|
50
|
-
<link rel="manifest" href="site.webmanifest" />
|
|
51
|
-
<link rel="stylesheet" href="styles/minimal-saas.css" />
|
|
52
|
-
<link rel="stylesheet" href="styles/bento.css" />
|
|
53
|
-
<link rel="stylesheet" href="styles/maximalist.css" />
|
|
54
|
-
<link rel="stylesheet" href="styles/bauhaus.css" />
|
|
55
|
-
<link rel="stylesheet" href="styles/tactile.css" />
|
|
56
|
-
<link rel="stylesheet" href="styles/neumorphism.css" />
|
|
57
|
-
<link rel="stylesheet" href="styles/retrofuturism.css" />
|
|
58
|
-
<link rel="stylesheet" href="styles/brutalism.css" />
|
|
59
|
-
<link rel="stylesheet" href="styles/cyberpunk.css" />
|
|
60
|
-
<link rel="stylesheet" href="styles/y2k.css" />
|
|
61
|
-
<link rel="stylesheet" href="styles/retro-glass.css" />
|
|
62
|
-
<link rel="icon" href="logo.png" type="image/png" sizes="1254x1254" />
|
|
63
|
-
<link rel="apple-touch-icon" href="logo.png" />
|
|
64
|
-
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
65
|
-
<meta name="apple-mobile-web-app-title" content="UI Style Kit CSS" />
|
|
66
|
-
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
67
|
-
<meta name="mobile-web-app-capable" content="yes" />
|
|
68
|
-
<meta name="msapplication-TileColor" content="#0b0f19" />
|
|
69
|
-
<meta name="msapplication-config" content="browserconfig.xml" />
|
|
70
|
-
<meta name="msapplication-starturl" content="/ui-style-kit-css/" />
|
|
71
|
-
<meta name="msapplication-navbutton-color" content="#0b0f19" />
|
|
72
|
-
<meta property="og:type" content="website" />
|
|
73
|
-
<meta property="og:locale" content="en_US" />
|
|
74
|
-
<meta property="og:site_name" content="UI Style Kit CSS" />
|
|
75
|
-
<meta property="og:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
|
|
76
|
-
<meta
|
|
77
|
-
property="og:description"
|
|
78
|
-
content="Try every UI Style Kit CSS visual system, switch shared themes and modes, and preview native element coverage."
|
|
79
|
-
/>
|
|
80
|
-
<meta property="og:url" content="https://foscat.github.io/ui-style-kit-css/" />
|
|
81
|
-
<meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
|
|
82
|
-
<meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
|
|
83
|
-
<meta property="og:image:type" content="image/png" />
|
|
84
|
-
<meta property="og:image:alt" content="UI Style Kit CSS social preview image" />
|
|
85
|
-
<meta name="twitter:card" content="summary_large_image" />
|
|
86
|
-
<meta name="twitter:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
|
|
87
|
-
<meta
|
|
88
|
-
name="twitter:description"
|
|
89
|
-
content="CSS-only UI style library demo with multi-style switching, shared themes, and accessibility-focused native HTML coverage."
|
|
90
|
-
/>
|
|
91
|
-
<meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
|
|
92
|
-
<meta name="twitter:image:alt" content="UI Style Kit CSS social preview image" />
|
|
93
|
-
<script type="application/ld+json">
|
|
94
|
-
{
|
|
95
|
-
"@context": "https://schema.org",
|
|
96
|
-
"@graph": [
|
|
97
|
-
{
|
|
98
|
-
"@type": "WebSite",
|
|
99
|
-
"name": "UI Style Kit CSS",
|
|
100
|
-
"url": "https://foscat.github.io/ui-style-kit-css/",
|
|
101
|
-
"description": "A CSS-only UI style library with 11 visual systems, 10 themes, and light/dark/contrast modes.",
|
|
102
|
-
"inLanguage": "en-US",
|
|
103
|
-
"publisher": {
|
|
104
|
-
"@type": "Person",
|
|
105
|
-
"name": "Kyle Foster"
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
"@type": "SoftwareSourceCode",
|
|
110
|
-
"name": "UI Style Kit CSS",
|
|
111
|
-
"codeRepository": "https://github.com/Foscat/ui-style-kit-css",
|
|
112
|
-
"url": "https://foscat.github.io/ui-style-kit-css/",
|
|
113
|
-
"license": "https://github.com/Foscat/ui-style-kit-css/blob/main/LICENSE",
|
|
114
|
-
"programmingLanguage": "CSS",
|
|
115
|
-
"description": "CSS-only visual style and color theme library for modern web interfaces.",
|
|
116
|
-
"keywords": "css, ui, style-kit, design-system, accessibility, themes"
|
|
117
|
-
}
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
</script>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>UI Style Kit CSS Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/ui-style-kit.css" />
|
|
121
8
|
<style>
|
|
122
9
|
.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); }
|
|
123
10
|
.demo-controls label { display: grid; gap: .25rem; font: 700 .85rem system-ui; }
|
|
@@ -167,7 +54,7 @@
|
|
|
167
54
|
<button class="${p}-button ${p}-button-primary">Primary</button>
|
|
168
55
|
<button class="${p}-button ${p}-button-secondary">Secondary</button>
|
|
169
56
|
<button class="${p}-button">Neutral</button>
|
|
170
|
-
<button class="${p}-icon-button" aria-label="Icon button"
|
|
57
|
+
<button class="${p}-icon-button" aria-label="Icon button">★</button>
|
|
171
58
|
<span class="${p}-badge ${p}-badge-primary">Primary</span>
|
|
172
59
|
<span class="${p}-badge ${p}-badge-warning">Warning</span>
|
|
173
60
|
</div>
|