@pantoken/components 0.4.1 → 0.5.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.
- 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 +2 -1
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.0",
|
|
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",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@pantoken/plugin-colors": "workspace:*",
|
|
47
|
+
"@pantoken/plugin-transition": "workspace:*",
|
|
47
48
|
"@pantoken/utils": "workspace:*"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|