@pantoken/components 0.4.1 → 0.5.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.
- package/LICENSE +21 -0
- package/dist/alert.css +1 -1
- package/dist/avatar.css +1 -1
- package/dist/components.css +1 -1
- package/dist/index.mjs +77 -30
- package/dist/progress-circle.css +1 -1
- package/dist/progress.css +1 -1
- package/package.json +22 -21
package/dist/progress-circle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --value{syntax:"<number>";inherits:true;initial-value:0}.instui-progress-circle{--value:0;--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand);--pantoken-pc-track:var(--instui-component-progress-circle-track-color);--pantoken-pc-stroke:var(--instui-component-progress-circle-medium-stroke-width);width:var(--instui-component-progress-circle-medium-size);height:var(--instui-component-progress-circle-medium-size);color:var(--instui-component-progress-circle-color);font-family:var(--instui-component-progress-circle-font-family);font-weight:var(--instui-component-progress-circle-font-weight);line-height:var(--instui-component-progress-circle-line-height);justify-content:center;align-items:center;display:inline-flex;position:relative}.instui-progress-circle:before{content:"";background:conic-gradient(var(--pantoken-pc-fill) calc(var(--value) *
|
|
1
|
+
@property --value{syntax:"<number>";inherits:true;initial-value:0}@property --value-now{syntax:"<number>";inherits:true;initial-value:0}@property --min{syntax:"<number>";inherits:true;initial-value:0}@property --max{syntax:"<number>";inherits:true;initial-value:100}@property --value-max{syntax:"<number>";inherits:true;initial-value:100}@property --animation-delay{syntax:"<number>";inherits:true;initial-value:0}.instui-progress-circle{--value:var(--value-now);--min:0;--max:var(--value-max);--animation-delay:0;--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand);--pantoken-pc-track:var(--instui-component-progress-circle-track-color);--pantoken-pc-stroke:var(--instui-component-progress-circle-medium-stroke-width);width:var(--instui-component-progress-circle-medium-size);height:var(--instui-component-progress-circle-medium-size);color:var(--instui-component-progress-circle-color);font-family:var(--instui-component-progress-circle-font-family);font-weight:var(--instui-component-progress-circle-font-weight);line-height:var(--instui-component-progress-circle-line-height);justify-content:center;align-items:center;display:inline-flex;position:relative}.instui-progress-circle:before{content:"";background:conic-gradient(var(--pantoken-pc-fill) clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%), var(--pantoken-pc-track) 0);-webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);mask:radial-gradient(farthest-side, #0000 calc(100% - var(--pantoken-pc-stroke)), #000 0);border-radius:50%;position:absolute;inset:0}.instui-progress-circle .value{z-index:1;justify-content:center;align-items:center;display:flex;position:relative}.instui-progress-circle.-size-xs{width:var(--instui-component-progress-circle-x-small-size);height:var(--instui-component-progress-circle-x-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-x-small-stroke-width)}.instui-progress-circle.-size-sm{width:var(--instui-component-progress-circle-small-size);height:var(--instui-component-progress-circle-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-small-stroke-width)}.instui-progress-circle.-size-md{width:var(--instui-component-progress-circle-medium-size);height:var(--instui-component-progress-circle-medium-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-medium-stroke-width)}.instui-progress-circle.-size-lg{width:var(--instui-component-progress-circle-large-size);height:var(--instui-component-progress-circle-large-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-large-stroke-width)}.instui-progress-circle.-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand)}.instui-progress-circle.-color-primary-inverse.-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand-inverse)}.instui-progress-circle.-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info)}.instui-progress-circle.-color-primary-inverse.-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info-inverse)}.instui-progress-circle.-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success)}.instui-progress-circle.-color-primary-inverse.-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success-inverse)}.instui-progress-circle.-color-warning{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning)}.instui-progress-circle.-color-primary-inverse.-color-warning{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning-inverse)}.instui-progress-circle.-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger)}.instui-progress-circle.-color-primary-inverse.-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger-inverse)}.instui-progress-circle.-color-primary-inverse{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand-inverse);--pantoken-pc-track:var(--instui-component-progress-circle-track-color-inverse);color:var(--instui-component-progress-circle-color-inverse)}@keyframes pantoken-progress-circle-indeterminate{to{transform:rotate(1turn)}}.instui-progress-circle:indeterminate{--value:25;--min:0;--max:100}.instui-progress-circle:indeterminate:before{animation:1s linear infinite pantoken-progress-circle-indeterminate}.instui-progress-circle:indeterminate .value{visibility:hidden}.instui-progress-circle{transition:--value 1s}.instui-progress-circle:before{transition:opacity .5s .2s,transform .5s;transform:translate(0)scale(1)}.instui-progress-circle>.value{transition:opacity .5s 1s,transform .5s 1s;transform:translate(0)}.instui-progress-circle.-should-animate{--value:0!important}.instui-progress-circle.-should-animate:before{opacity:0;transform:translate(0)scale(.75)}.instui-progress-circle.-should-animate>.value{opacity:0;transform:translateY(10%)}.instui-progress-circle.-size-x-small{width:var(--instui-component-progress-circle-x-small-size);height:var(--instui-component-progress-circle-x-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-x-small-stroke-width)}.instui-progress-circle.-size-small{width:var(--instui-component-progress-circle-small-size);height:var(--instui-component-progress-circle-small-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-small-stroke-width)}.instui-progress-circle.-size-medium{width:var(--instui-component-progress-circle-medium-size);height:var(--instui-component-progress-circle-medium-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-medium-stroke-width)}.instui-progress-circle.-size-large{width:var(--instui-component-progress-circle-large-size);height:var(--instui-component-progress-circle-large-size);--pantoken-pc-stroke:var(--instui-component-progress-circle-large-stroke-width)}.instui-progress-circle.-should-animate-on-mount{--value:0!important}.instui-progress-circle.-should-animate-on-mount:before{opacity:0;transform:translate(0)scale(.75)}.instui-progress-circle.-should-animate-on-mount>.value{opacity:0;transform:translateY(10%)}.instui-progress-circle.-shold-animate-on-mount{--value:0!important}.instui-progress-circle.-shold-animate-on-mount:before{opacity:0;transform:translate(0)scale(.75)}.instui-progress-circle.-shold-animate-on-mount>.value{opacity:0;transform:translateY(10%)}.instui-progress-circle.-meter-color-brand{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-brand)}.instui-progress-circle.-meter-color-info{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-info)}.instui-progress-circle.-meter-color-success{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-success)}.instui-progress-circle.-meter-color-warning,.instui-progress-circle.-meter-color-alert{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-warning)}.instui-progress-circle.-meter-color-danger{--pantoken-pc-fill:var(--instui-component-progress-circle-meter-color-danger)}
|
package/dist/progress.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.instui-progress{width:100%;height:var(--instui-component-progress-bar-medium-height);background:var(--instui-component-progress-bar-track-color);border:var(--instui-component-progress-bar-track-bottom-border-width) solid var(--instui-component-progress-bar-border-color);border-radius:var(--instui-component-progress-bar-border-radius);display:block;position:relative;overflow:hidden}.instui-progress:after{content:"";height:var(--instui-component-progress-bar-track-bottom-border-width);background:var(--instui-component-progress-bar-track-bottom-border-color);pointer-events:none;inset-inline:0;position:absolute;bottom:0}.instui-progress.-size-xs{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-sm{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-lg{height:var(--instui-component-progress-bar-large-height)}@scope(.instui-progress){:scope>.bar{background:var(--instui-color-background-brand);border-radius:var(--instui-component-progress-bar-border-radius);height:
|
|
1
|
+
@property --value{syntax:"<number>";inherits:true;initial-value:0}@property --value-now{syntax:"<number>";inherits:true;initial-value:0}@property --min{syntax:"<number>";inherits:true;initial-value:0}@property --max{syntax:"<number>";inherits:true;initial-value:100}@property --value-max{syntax:"<number>";inherits:true;initial-value:100}@keyframes pantoken-progress-indeterminate{0%{left:-40%}to{left:100%}}.instui-progress{--value:var(--value-now);--min:0;--max:var(--value-max);width:100%;height:var(--instui-component-progress-bar-medium-height);background:var(--instui-component-progress-bar-track-color);border:var(--instui-component-progress-bar-track-bottom-border-width) solid var(--instui-component-progress-bar-border-color);border-radius:var(--instui-component-progress-bar-border-radius);display:block;position:relative;overflow:hidden}.instui-progress:after{content:"";height:var(--instui-component-progress-bar-track-bottom-border-width);background:var(--instui-component-progress-bar-track-bottom-border-color);pointer-events:none;inset-inline:0;position:absolute;bottom:0}.instui-progress.-size-xs{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-sm{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-md{height:var(--instui-component-progress-bar-medium-height)}.instui-progress.-size-lg{height:var(--instui-component-progress-bar-large-height)}@scope(.instui-progress){:scope>.bar{height:100%;width:clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);background:var(--instui-color-background-brand);border-radius:var(--instui-component-progress-bar-border-radius)}:scope>.value{padding:0 var(--instui-component-progress-bar-value-padding);color:var(--instui-component-progress-bar-text-color);font-family:var(--instui-component-progress-bar-font-family);font-size:var(--instui-component-progress-bar-medium-value-font-size);font-weight:var(--instui-component-progress-bar-font-weight);line-height:var(--instui-component-progress-bar-line-height)}:scope.-color-inverse>.value,:scope>.value.-color-inverse{color:var(--instui-component-progress-bar-text-color-inverse)}:scope:indeterminate>.bar{width:40%;animation:1.4s ease-in-out infinite pantoken-progress-indeterminate;position:absolute}:scope:indeterminate>.value{visibility:hidden}}.instui-progress.-color-brand .bar{background:var(--instui-color-background-brand)}.instui-progress.-color-info .bar{background:var(--instui-color-background-info)}.instui-progress.-color-success .bar{background:var(--instui-color-background-success)}.instui-progress.-color-warning .bar{background:var(--instui-color-background-warning)}.instui-progress.-color-danger .bar{background:var(--instui-color-background-error)}.instui-progress.-color-primary-inverse{background:var(--instui-component-progress-bar-track-color-inverse);border-color:var(--instui-component-progress-bar-border-color-inverse);color:var(--instui-component-progress-bar-text-color-inverse)}.instui-progress.-color-primary-inverse:after{background:var(--instui-component-progress-bar-track-bottom-border-color-inverse)}.instui-progress.-color-primary-inverse .bar{background:var(--instui-component-progress-bar-meter-color-brand-inverse)}.instui-progress.-render-value-inside .value{justify-content:flex-start;align-items:center;display:flex;position:absolute;inset:0}.instui-progress.-should-animate>.bar{transition:all .5s}.instui-progress.-size-x-small{height:var(--instui-component-progress-bar-x-small-height)}.instui-progress.-size-small{height:var(--instui-component-progress-bar-small-height)}.instui-progress.-size-medium{height:var(--instui-component-progress-bar-medium-height)}.instui-progress.-size-large{height:var(--instui-component-progress-bar-large-height)}.instui-progress.-meter-color-brand .bar{background:var(--instui-color-background-brand)}.instui-progress.-meter-color-info .bar{background:var(--instui-color-background-info)}.instui-progress.-meter-color-success .bar{background:var(--instui-color-background-success)}.instui-progress.-meter-color-warning .bar,.instui-progress.-meter-color-alert .bar{background:var(--instui-color-background-warning)}.instui-progress.-meter-color-danger .bar{background:var(--instui-color-background-error)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pantoken/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "An InstUI-look CSS component library from the pantoken tokens: prose/content styling plus class-based components (button, alert, badge).",
|
|
5
5
|
"homepage": "https://pantoken.iywahl.com",
|
|
6
6
|
"bugs": "https://github.com/thedannywahl/pantoken/issues",
|
|
@@ -36,28 +36,23 @@
|
|
|
36
36
|
"access": "public",
|
|
37
37
|
"provenance": true
|
|
38
38
|
},
|
|
39
|
-
"scripts": {
|
|
40
|
-
"component-styles": "node scripts/component-styles.ts",
|
|
41
|
-
"dev": "vp run @pantoken/plugin-theme-custom-media#build && node scripts/component-styles.ts && node scripts/generate.ts && node scripts/build-entries.ts && vp pack --watch",
|
|
42
|
-
"test": "vp run @pantoken/plugin-theme-custom-media#build && node scripts/component-styles.ts && vp test",
|
|
43
|
-
"check": "vp run @pantoken/plugin-theme-custom-media#build && node scripts/component-styles.ts && node scripts/build-entries.ts && vp check"
|
|
44
|
-
},
|
|
45
39
|
"dependencies": {
|
|
46
|
-
"@pantoken/plugin-colors": "
|
|
47
|
-
"@pantoken/
|
|
40
|
+
"@pantoken/plugin-colors": "0.1.1",
|
|
41
|
+
"@pantoken/plugin-transition": "0.3.1",
|
|
42
|
+
"@pantoken/utils": "0.2.6"
|
|
48
43
|
},
|
|
49
44
|
"devDependencies": {
|
|
50
|
-
"@cssdoc/config": "
|
|
51
|
-
"@cssdoc/core": "
|
|
52
|
-
"@
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
45
|
+
"@cssdoc/config": "^0.11.0",
|
|
46
|
+
"@cssdoc/core": "^0.11.0",
|
|
47
|
+
"@types/node": "^24.13.3",
|
|
48
|
+
"postcss": "^8.5.26",
|
|
49
|
+
"typescript": "^7.0.2",
|
|
50
|
+
"vite": "npm:@voidzero-dev/vite-plus-core@0.2.9",
|
|
51
|
+
"vite-plus": "0.2.9",
|
|
52
|
+
"@pantoken/icons": "0.1.5",
|
|
53
|
+
"@pantoken/plugin-theme-custom-media": "0.1.5",
|
|
54
|
+
"@pantoken/plugin-props-minify": "0.1.2",
|
|
55
|
+
"@pantoken/tokens": "0.2.3"
|
|
61
56
|
},
|
|
62
57
|
"engines": {
|
|
63
58
|
"node": ">=22.18.0"
|
|
@@ -65,5 +60,11 @@
|
|
|
65
60
|
"pantoken": {
|
|
66
61
|
"key": "components",
|
|
67
62
|
"kind": "namespace"
|
|
63
|
+
},
|
|
64
|
+
"scripts": {
|
|
65
|
+
"component-styles": "node scripts/component-styles.ts",
|
|
66
|
+
"dev": "vp run @pantoken/plugin-theme-custom-media#build && node scripts/component-styles.ts && node scripts/generate.ts && node scripts/build-entries.ts && vp pack --watch",
|
|
67
|
+
"test": "vp run @pantoken/plugin-theme-custom-media#build && node scripts/component-styles.ts && vp test",
|
|
68
|
+
"check": "vp run @pantoken/plugin-theme-custom-media#build && node scripts/component-styles.ts && node scripts/build-entries.ts && vp check"
|
|
68
69
|
}
|
|
69
|
-
}
|
|
70
|
+
}
|