@clusterenvision/ui-scss 1.94.3
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/LICENSE +21 -0
- package/README.md +152 -0
- package/dist/ce-ui-min.css +2951 -0
- package/dist/ce-ui-min.css.map +1 -0
- package/dist/ce-ui.css +4894 -0
- package/dist/ce-ui.css.map +1 -0
- package/dist/components/advanced/calendar.css +37 -0
- package/dist/components/advanced/carousel.css +59 -0
- package/dist/components/advanced/chat.css +29 -0
- package/dist/components/advanced/code-block.css +16 -0
- package/dist/components/advanced/editor.css +122 -0
- package/dist/components/advanced/rating.css +19 -0
- package/dist/components/advanced/steps.css +46 -0
- package/dist/components/advanced/timeline.css +32 -0
- package/dist/components/buttons/button-group.css +28 -0
- package/dist/components/buttons/button.css +305 -0
- package/dist/components/buttons/icon-button.css +32 -0
- package/dist/components/charts/chart-types.css +36 -0
- package/dist/components/containers/accordion.css +65 -0
- package/dist/components/containers/card.css +60 -0
- package/dist/components/containers/drawer.css +33 -0
- package/dist/components/containers/modal.css +61 -0
- package/dist/components/containers/panel.css +27 -0
- package/dist/components/containers/toast.css +38 -0
- package/dist/components/content/avatar.css +54 -0
- package/dist/components/content/badge.css +44 -0
- package/dist/components/content/chip.css +234 -0
- package/dist/components/content/divider.css +27 -0
- package/dist/components/content/image.css +23 -0
- package/dist/components/feedback/alert.css +50 -0
- package/dist/components/feedback/message.css +18 -0
- package/dist/components/feedback/progress-bar.css +22 -0
- package/dist/components/feedback/skeleton.css +35 -0
- package/dist/components/feedback/snackbar.css +30 -0
- package/dist/components/form-controls/checkbox.css +183 -0
- package/dist/components/form-controls/date-picker.css +26 -0
- package/dist/components/form-controls/file-upload.css +48 -0
- package/dist/components/form-controls/form-group.css +19 -0
- package/dist/components/form-controls/input.css +96 -0
- package/dist/components/form-controls/radio.css +20 -0
- package/dist/components/form-controls/range.css +42 -0
- package/dist/components/form-controls/select.css +243 -0
- package/dist/components/form-controls/textarea.css +28 -0
- package/dist/components/form-controls/toggle.css +38 -0
- package/dist/components/navigation/breadcrumbs.css +33 -0
- package/dist/components/navigation/menu.css +43 -0
- package/dist/components/navigation/navbar.css +64 -0
- package/dist/components/navigation/pagination.css +45 -0
- package/dist/components/navigation/sidebar.css +35 -0
- package/dist/components/navigation/tabs.css +25 -0
- package/dist/components/overlays/backdrop.css +6 -0
- package/dist/components/overlays/dropdown.css +77 -0
- package/dist/components/overlays/loader.css +28 -0
- package/dist/components/overlays/popover.css +54 -0
- package/dist/components/overlays/tooltip.css +37 -0
- package/dist/components/specialty/ce-atm-card.css +204 -0
- package/dist/components/tables-lists/data-table.css +48 -0
- package/dist/components/tables-lists/list.css +22 -0
- package/dist/components/tables-lists/table.css +40 -0
- package/dist/components/tables-lists/tree-view.css +37 -0
- package/dist/themes/core/package.json +12 -0
- package/dist/themes/core/tokens.css +120 -0
- package/dist/themes/core/tokens.d.ts +69 -0
- package/dist/themes/core/tokens.json +136 -0
- package/dist/themes/premium/package.json +12 -0
- package/dist/themes/premium/tokens.css +120 -0
- package/dist/themes/premium/tokens.d.ts +69 -0
- package/dist/themes/premium/tokens.json +136 -0
- package/dist/tokens/tokens.css +120 -0
- package/dist/tokens/tokens.d.ts +69 -0
- package/dist/tokens/tokens.json +133 -0
- package/package.json +61 -0
- package/src/abstracts/_functions.scss +34 -0
- package/src/abstracts/_mixins.scss +162 -0
- package/src/abstracts/_placeholders.scss +18 -0
- package/src/abstracts/_variables.scss +413 -0
- package/src/abstracts/_z-index.scss +9 -0
- package/src/accessibility/_focus-ring.scss +11 -0
- package/src/accessibility/_theme-switcher.scss +41 -0
- package/src/base/_animations.scss +32 -0
- package/src/base/_forms.scss +62 -0
- package/src/base/_reset.scss +102 -0
- package/src/base/_theme-base.scss +162 -0
- package/src/base/_typography.scss +38 -0
- package/src/components/advanced/_calendar.scss +47 -0
- package/src/components/advanced/_carousel.scss +87 -0
- package/src/components/advanced/_chat.scss +37 -0
- package/src/components/advanced/_code-block.scss +22 -0
- package/src/components/advanced/_editor.scss +156 -0
- package/src/components/advanced/_modal.scss +96 -0
- package/src/components/advanced/_notification-center.scss +172 -0
- package/src/components/advanced/_popover.scss +68 -0
- package/src/components/advanced/_rating.scss +22 -0
- package/src/components/advanced/_stepper.scss +135 -0
- package/src/components/advanced/_steps.scss +57 -0
- package/src/components/advanced/_timeline.scss +47 -0
- package/src/components/advanced/_wizard.scss +132 -0
- package/src/components/buttons/_button-group.scss +40 -0
- package/src/components/buttons/_button.scss +296 -0
- package/src/components/buttons/_icon-button.scss +42 -0
- package/src/components/charts/_chart-types.scss +74 -0
- package/src/components/containers/_accordion.scss +65 -0
- package/src/components/containers/_card.scss +65 -0
- package/src/components/containers/_drawer.scss +48 -0
- package/src/components/containers/_modal.scss +78 -0
- package/src/components/containers/_panel.scss +37 -0
- package/src/components/containers/_toast.scss +40 -0
- package/src/components/content/_avatar.scss +56 -0
- package/src/components/content/_badge.scss +42 -0
- package/src/components/content/_calendar.scss +147 -0
- package/src/components/content/_carousel.scss +112 -0
- package/src/components/content/_chip.scss +246 -0
- package/src/components/content/_divider.scss +49 -0
- package/src/components/content/_image.scss +32 -0
- package/src/components/content/_rating.scss +60 -0
- package/src/components/content/_rich-text-editor.scss +153 -0
- package/src/components/content/_timeline-advanced.scss +138 -0
- package/src/components/content/_timeline.scss +86 -0
- package/src/components/feedback/_advanced-notification.scss +156 -0
- package/src/components/feedback/_alert.scss +86 -0
- package/src/components/feedback/_message.scss +26 -0
- package/src/components/feedback/_notification-center.scss +118 -0
- package/src/components/feedback/_progress-bar.scss +48 -0
- package/src/components/feedback/_skeleton.scss +47 -0
- package/src/components/feedback/_snackbar.scss +38 -0
- package/src/components/feedback/_spinner.scss +211 -0
- package/src/components/feedback/_toast-queue.scss +164 -0
- package/src/components/form-controls/_autocomplete.scss +80 -0
- package/src/components/form-controls/_checkbox.scss +202 -0
- package/src/components/form-controls/_date-picker.scss +50 -0
- package/src/components/form-controls/_file-upload.scss +61 -0
- package/src/components/form-controls/_form-group.scss +26 -0
- package/src/components/form-controls/_input.scss +139 -0
- package/src/components/form-controls/_multi-select.scss +175 -0
- package/src/components/form-controls/_radio.scss +27 -0
- package/src/components/form-controls/_range.scss +54 -0
- package/src/components/form-controls/_select.scss +242 -0
- package/src/components/form-controls/_textarea.scss +45 -0
- package/src/components/form-controls/_toggle.scss +47 -0
- package/src/components/navigation/_breadcrumbs.scss +41 -0
- package/src/components/navigation/_menu.scss +75 -0
- package/src/components/navigation/_navbar.scss +79 -0
- package/src/components/navigation/_pagination.scss +85 -0
- package/src/components/navigation/_sidebar.scss +44 -0
- package/src/components/navigation/_stepper.scss +115 -0
- package/src/components/navigation/_tabs.scss +50 -0
- package/src/components/navigation/_tree-view.scss +95 -0
- package/src/components/navigation/_wizard.scss +132 -0
- package/src/components/overlays/_backdrop.scss +10 -0
- package/src/components/overlays/_dropdown.scss +110 -0
- package/src/components/overlays/_loader.scss +32 -0
- package/src/components/overlays/_popover.scss +64 -0
- package/src/components/overlays/_tooltip.scss +64 -0
- package/src/components/specialty/_ce-atm-card.scss +255 -0
- package/src/components/tables/_data-grid.scss +92 -0
- package/src/components/tables/_filter-grid.scss +29 -0
- package/src/components/tables-lists/_data-table.scss +63 -0
- package/src/components/tables-lists/_list.scss +30 -0
- package/src/components/tables-lists/_table.scss +79 -0
- package/src/components/tables-lists/_tree-view.scss +47 -0
- package/src/layout/_container.scss +20 -0
- package/src/layout/_footer.scss +41 -0
- package/src/layout/_grid.scss +23 -0
- package/src/layout/_header.scss +41 -0
- package/src/layout/_section.scss +26 -0
- package/src/layout/_sidebar.scss +39 -0
- package/src/layout/_stack.scss +23 -0
- package/src/main.css +3250 -0
- package/src/main.css.map +1 -0
- package/src/main.scss +158 -0
- package/src/minimal.scss +62 -0
- package/src/themes/_cool-slate.scss +11 -0
- package/src/themes/_dark.scss +11 -0
- package/src/themes/_default.scss +12 -0
- package/src/themes/_forest.scss +11 -0
- package/src/themes/_glassy-aero-windows.scss +9 -0
- package/src/themes/_glassy-amber.scss +21 -0
- package/src/themes/_glassy-aurora-sky.scss +9 -0
- package/src/themes/_glassy-blue.scss +10 -0
- package/src/themes/_glassy-cyan.scss +9 -0
- package/src/themes/_glassy-emerald-mist.scss +9 -0
- package/src/themes/_glassy-frosted-silver.scss +9 -0
- package/src/themes/_glassy-glass-white.scss +9 -0
- package/src/themes/_glassy-gold.scss +9 -0
- package/src/themes/_glassy-green.scss +10 -0
- package/src/themes/_glassy-ice-black.scss +13 -0
- package/src/themes/_glassy-mac-dark.scss +13 -0
- package/src/themes/_glassy-midnight-blue.scss +12 -0
- package/src/themes/_glassy-neon-cyber.scss +9 -0
- package/src/themes/_glassy-orange.scss +10 -0
- package/src/themes/_glassy-pink.scss +9 -0
- package/src/themes/_glassy-purple.scss +10 -0
- package/src/themes/_glassy-rose-gold.scss +9 -0
- package/src/themes/_glassy-sakura-glass.scss +9 -0
- package/src/themes/_glassy-silver.scss +9 -0
- package/src/themes/_glassy-teal.scss +9 -0
- package/src/themes/_high-contrast.scss +11 -0
- package/src/themes/_light.scss +10 -0
- package/src/themes/_mac.scss +10 -0
- package/src/themes/_minimal-mono.scss +11 -0
- package/src/themes/_mintwave.scss +9 -0
- package/src/themes/_neutral-light.scss +11 -0
- package/src/themes/_nordwave.scss +9 -0
- package/src/themes/_ocean.scss +9 -0
- package/src/themes/_orange.scss +9 -0
- package/src/themes/_purple.scss +9 -0
- package/src/themes/_red.scss +9 -0
- package/src/themes/_skyfade.scss +9 -0
- package/src/themes/_soft-pastel.scss +11 -0
- package/src/themes/_solarized.scss +9 -0
- package/src/themes/_standard-dark.scss +8 -0
- package/src/themes/_standard-default.scss +9 -0
- package/src/themes/_transparent.scss +9 -0
- package/src/themes/_true-dark.scss +11 -0
- package/src/themes/_warm-neutral.scss +11 -0
- package/src/themes.zip +0 -0
- package/src/tokens/tokens.json +133 -0
- package/src/utilities/_display.scss +11 -0
- package/src/utilities/_flex.scss +9 -0
- package/src/utilities/_position.scss +6 -0
- package/src/utilities/_screen-reader.scss +9 -0
- package/src/utilities/_spacing.scss +22 -0
- package/src/utilities/_text.scss +14 -0
- package/src/utilities/_visibility.scss +4 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Cluster Envision
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the Software), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
> Quick start: run the `web/ce-lms` starter to see `ce-ui-scss` applied to real login/register forms alongside CE web components. `npm install && npm run dev` inside that folder for a production-like baseline.
|
|
2
|
+
|
|
3
|
+
Step-by-Step: Make ce-ui-scss Publishable
|
|
4
|
+
π 1. Move main.scss and related SCSS into a dedicated folder
|
|
5
|
+
|
|
6
|
+
Create:
|
|
7
|
+
|
|
8
|
+
packages/
|
|
9
|
+
βββ ce-ui-scss/
|
|
10
|
+
βββ src/
|
|
11
|
+
β βββ abstracts/ # _variables.scss, _mixins.scss, etc.
|
|
12
|
+
β βββ base/ # _reset.scss, _typography.scss, etc.
|
|
13
|
+
β βββ components/ # _button.scss, _card.scss, etc.
|
|
14
|
+
β βββ themes/ # _dark.scss, _light.scss, etc.
|
|
15
|
+
β βββ utilities/ # _spacing.scss, _grid.scss, etc.
|
|
16
|
+
β βββ main.scss # The main entrypoint that @use everything
|
|
17
|
+
β βββ package.scss # (Optional if needed separately)
|
|
18
|
+
βββ dist/
|
|
19
|
+
β βββ ce-ui.css # Full compiled output (via build)
|
|
20
|
+
β βββ ce-ui-min.css # Minimal baseline bundle
|
|
21
|
+
βββ package.json # NPM module metadata
|
|
22
|
+
βββ README.md
|
|
23
|
+
βββ LICENSE
|
|
24
|
+
|
|
25
|
+
π¦ 2. packages/ce-ui-scss/package.json
|
|
26
|
+
|
|
27
|
+
{
|
|
28
|
+
"name": "@clusterenvision/ui-scss",
|
|
29
|
+
"version": "1.0.0",
|
|
30
|
+
"description": "Modular, scalable, reusable SCSS design system for Angular, React, Vue, Blazor, and HTML.",
|
|
31
|
+
"main": "dist/ce-ui.css",
|
|
32
|
+
"style": "dist/ce-ui.css",
|
|
33
|
+
"files": [
|
|
34
|
+
"src/",
|
|
35
|
+
"dist/",
|
|
36
|
+
"main.scss"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "sass src/main.scss dist/ce-ui.css && sass src/minimal.scss dist/ce-ui-min.css"
|
|
40
|
+
},
|
|
41
|
+
"keywords": [
|
|
42
|
+
"scss",
|
|
43
|
+
"design-system",
|
|
44
|
+
"component-library",
|
|
45
|
+
"responsive",
|
|
46
|
+
"enterprise"
|
|
47
|
+
],
|
|
48
|
+
"author": "Cluster Envision",
|
|
49
|
+
"license": "MIT",
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"sass": "^1.89.0"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
βοΈ 3. src/main.scss β Your Entrypoint
|
|
56
|
+
|
|
57
|
+
Make sure main.scss uses @forward or @use like:
|
|
58
|
+
|
|
59
|
+
// src/main.scss
|
|
60
|
+
@use 'abstracts/variables';
|
|
61
|
+
@use 'abstracts/functions';
|
|
62
|
+
@use 'abstracts/mixins';
|
|
63
|
+
@use 'base/reset';
|
|
64
|
+
@use 'base/typography';
|
|
65
|
+
@use 'components/button';
|
|
66
|
+
@use 'themes/light';
|
|
67
|
+
@use 'themes/dark';
|
|
68
|
+
@use 'utilities/spacing';
|
|
69
|
+
@use 'utilities/flex';
|
|
70
|
+
// ... all others
|
|
71
|
+
|
|
72
|
+
π 4. Build command
|
|
73
|
+
|
|
74
|
+
From the root of your monorepo or inside packages/ce-ui-scss:
|
|
75
|
+
|
|
76
|
+
npm run build
|
|
77
|
+
# This compiles into: dist/ce-ui.css and dist/ce-ui-min.css
|
|
78
|
+
|
|
79
|
+
π 5. Publish to NPM
|
|
80
|
+
|
|
81
|
+
First, make sure you're logged in:
|
|
82
|
+
|
|
83
|
+
npm login
|
|
84
|
+
|
|
85
|
+
Then from inside packages/ce-ui-scss/:
|
|
86
|
+
|
|
87
|
+
npm publish --access public
|
|
88
|
+
|
|
89
|
+
Youβll now be able to install via:
|
|
90
|
+
|
|
91
|
+
npm install @clusterenvision/ui-scss
|
|
92
|
+
|
|
93
|
+
π¦ 6. Using in Projects
|
|
94
|
+
|
|
95
|
+
In Angular / React / Vue / HTML:
|
|
96
|
+
|
|
97
|
+
@use '@clusterenvision/ui-scss/src/main' as *;
|
|
98
|
+
|
|
99
|
+
Or just link the CSS:
|
|
100
|
+
|
|
101
|
+
<link rel="stylesheet" href="node_modules/@clusterenvision/ui-scss/dist/ce-ui.css" />
|
|
102
|
+
|
|
103
|
+
Minimal baseline bundle (lighter for early dev):
|
|
104
|
+
|
|
105
|
+
<link rel="stylesheet" href="node_modules/@clusterenvision/ui-scss/dist/ce-ui-min.css" />
|
|
106
|
+
|
|
107
|
+
β
Next Steps
|
|
108
|
+
|
|
109
|
+
Would you like me to:
|
|
110
|
+
|
|
111
|
+
π¦ Prepare the publishable ce-ui-scss/ folder as a zip?
|
|
112
|
+
|
|
113
|
+
π§ͺ Set up a sample Angular or React project to consume this package?
|
|
114
|
+
|
|
115
|
+
π§Ύ Help you automate versioning + changelog + CI/CD for publishing?
|
|
116
|
+
|
|
117
|
+
Let me know and Iβll take the next step!
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
ce-ui-scss release readiness (current focus)
|
|
122
|
+
|
|
123
|
+
1) Token version locking
|
|
124
|
+
- Source of truth: keep `src/abstracts/_variables.scss` pinned per release tag; add a CHANGELOG entry whenever tokens change; avoid silent drift from `dist/ce-ui.css`.
|
|
125
|
+
- SemVer policy: only add new tokens in minors/patches; rename/remove tokens only in majors after deprecation warnings.
|
|
126
|
+
- Build guard: during CI, run `sass src/main.scss dist/ce-ui.css` and diff against committed `dist/ce-ui.css`; fail if output changes without `package.json` version bump.
|
|
127
|
+
|
|
128
|
+
2) CDN/self-host strategy
|
|
129
|
+
- CDN: publish `dist/ce-ui.css` to npm; consumers can pull via `https://unpkg.com/@clusterenvision/ui-scss@<version>/dist/ce-ui.css` (or jsDelivr). Document exact URL patterns and recommend SRI hashes in release notes.
|
|
130
|
+
- Self-host: ship SCSS entry at `@clusterenvision/ui-scss/src/main`; allow teams to consume tokens via `@use`, then compile into their own bundles. Keep `files` list minimal to avoid shipping node_modules or docs.
|
|
131
|
+
- Cache policy: recommend immutable caching with versioned URLs; discourage latest without pinning.
|
|
132
|
+
|
|
133
|
+
3) Visual regression coverage
|
|
134
|
+
- Tooling: start with Playwright screenshots (headless chromium) for zero-SaaS dependency; keep config in `tests/visual/`.
|
|
135
|
+
- Scope: cover base themes, buttons, form controls, layout primitives, alerts, modal/tooltip/toast states, focus/hover/disabled states, and dark/default/light themes.
|
|
136
|
+
- Workflow: `npm run vrt:baseline` to record (runs Sass build into tests/public), `npm run vrt:test` in CI to compare. Optionally wire Percy/Chromatic later by reusing the same stories/pages.
|
|
137
|
+
|
|
138
|
+
Whatβs implemented now
|
|
139
|
+
- Playwright VRT scaffold in `tests/visual/` with `theme-default`, `theme-dark`, and `theme-high-contrast` snapshots driven by `tests/web-test-html/ce-scss-components-showcase.html`.
|
|
140
|
+
- CI-ready drift guard: `npm run check:dist` rebuilds `dist/ce-ui.css` and fails if it changes without a `package.json` version update (uses git when present; otherwise require `CHECK_DIST_ASSUME_VERSION_BUMP=1` after you bump the version).
|
|
141
|
+
- README now documents CDN URLs and self-host guidance; VRT commands are ready for baseline + CI runs.
|
|
142
|
+
|
|
143
|
+
CDN / self-host details
|
|
144
|
+
- CDN: version-pinned URL `https://unpkg.com/@clusterenvision/ui-scss@<version>/dist/ce-ui.css` (jsDelivr works too). Add SRI from `curl ... | openssl dgst -sha384 -binary | openssl base64 -A`.
|
|
145
|
+
- Self-host: consume SCSS via `@use '@clusterenvision/ui-scss/src/main' as *;` and compile into your app bundle; avoid unpinned `latest`.
|
|
146
|
+
- Cache policy: serve with immutable caching when using versioned URLs; keep hash in release notes for SRI copy/paste.
|
|
147
|
+
|
|
148
|
+
Visual regression quickstart
|
|
149
|
+
- Install deps: `npm install`
|
|
150
|
+
- Capture/update baselines: `npm run vrt:baseline`
|
|
151
|
+
- Compare in CI: `npm run vrt:test`
|
|
152
|
+
- Baselines live in `tests/visual/__screenshots__/`; artifacts/diffs go to `tests/visual/.artifacts/`.
|