diff --git a/dist/surfkit.bundle.css b/dist/surfkit.bundle.css new file mode 100644 index 0000000..596d866 --- /dev/null +++ b/dist/surfkit.bundle.css @@ -0,0 +1,10 @@ +*,::after,::before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,h5,h6,menu[class],ol[class],p,ul[class]{margin:0}menu[class],ol[class],ul[class]{padding:0;list-style:none}html{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg{display:block;max-width:100%;font-style:italic}button,input,select,textarea{font:inherit}iframe{border:none}button{cursor:pointer;background:0 0;border:none}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}@font-face{font-family:Geist;src:url("fonts/geist.woff2") format("woff2-variations");font-weight:100 900;font-style:normal}:root{--font-stack:"Geist","Inter",system-ui,sans-serif}h1,h2,h3,h4,h5,h6,strong{color:var(--sk-color-tp-heading)}h1:has(ion-icon),h2:has(ion-icon),h3:has(ion-icon),h4:has(ion-icon){display:flex;align-items:center;gap:.35em}strong{font-weight:700}:root{--ft-size:clamp(0.975rem, 0.975rem + 0.390625vw, 1rem);--ft-line-height:1.45;--ft-line-height-base:1em;--content-default-spacer:1em;--content-default-line-height:1.5;--btn-padding:0.3em 0.8em;--btn-radius:0.5em;--btn-spacer:0.75em;--btn-container-spacer:0.5em;--infobox-ft-size:0.95rem;--infobox-padding:0.6em 1em;--infobox-radius:0.8em;--infobox-spacer:0.75em;--bp-default:960px;--bp-medium:860px;--bp-small:720px}:root{--sk-color-tp-heading:hsl(0, 0%, 10%);--sk-color-tp-body:hsl(0, 0%, 20%);--sk-color-accent:hsl(0, 0%, 15%);--sk-color-on-accent:hsl(0, 0%, 94%);--sk-color-accent--state:hsl(0, 0%, 25%);--sk-color-accent-container:hsl(240, 15%, 97%);--sk-color-accent-container-outline:hsl(240, 15%, 75%);--sk-color-on-accent-container:hsl(240, 15%, 20%);--sk-color-primary:hsl(240, 84%, 48%);--sk-color-on-primary:hsl(240, 100%, 96%);--sk-color-primary--state:hsl(240, 86%, 58%);--sk-color-primary-container:hsl(240, 70%, 94%);--sk-color-on-primary-container:hsl(240, 98%, 20%);--sk-color-secondary:hsl(269, 93%, 89%);--sk-color-on-secondary:hsl(269, 96%, 20%);--sk-color-secondary--state:hsl(269, 93%, 85%);--sk-color-secondary-container:hsla(269, 66%, 58.4%);--sk-color-on-secondary-container:hsla(269, 100%, 5.9%);--sk-color-error:hsla(0, 75.5%, 41.6%, 1);--sk-color-on-error:hsla(0, 0%, 100%, 1);--sk-color-error-container:hsla(6, 100%, 92%, 1);--sk-color-on-error-container:hsla(358, 100%, 12.7%, 1);--sk-color-warning:hsla(39, 75.5%, 41.6%, 1);--sk-color-on-warning:hsla(39, 0%, 100%, 1);--sk-color-warning-container:hsla(39, 100%, 92%, 1);--sk-color-on-warning-container:hsla(39, 100%, 12.7%, 1);--sk-color-background:hsla(274, 100%, 98.6%, 1);--sk-color-on-background:hsla(240, 15.6%, 12.5%, 1);--sk-color-background--state:rgba(226, 221, 230, 0.75);--sk-color-surface:hsl(210, 7%, 92%);--sk-color-on-surface:hsla(240, 5.3%, 11.2%, 1);--sk-color-surface--state:hsl(210, 7%, 89%);--sk-color-surface-variant:hsla(225, 23.1%, 89.8%, 1);--sk-color-on-surface-variant:hsla(218, 7.6%, 28.4%, 1);--sk-color-outline:hsla(220, 5%, 47.5%, 1);--sk-color-outline-variant:hsla(225, 11.1%, 78.8%, 1);--sk-color-focus:hsla(219, 100%, 50%, 0.4);--sk-color-shadow:hsla(0, 0%, 0%, 1);--sk-color-scrim:hsla(0, 0%, 0%, 1);--sk-color-inverse-surface:hsla(240, 3%, 19.4%, 1);--sk-color-inverse-on-surface:hsla(285, 15.4%, 94.9%, 1);--sk-color-inverse-primary:hsla(240, 100%, 87.8%, 1);--sk-color-background:hsl(210, 10%, 98%);--sk-color-background-dim:hsl(210, 6%, 94%);color-scheme:light}:root{--an-global-ease:140ms all ease-in-out}body{font-family:var(--font-stack);font-size:var(--ft-size);line-height:var(--ft-line-height);background:var(--sk-color-background-dim);color:var(--sk-color-tp-body)}a{color:var(--sk-color-primary);text-decoration:underline;text-decoration-thickness:0.125em}a:hover{color:var(--sk-color-tp-body)}hr{border:none;border-bottom:1px solid var(--sk-color-outline)}blockquote{padding:.25em .25em .25em 1em;background:var(--sk-color-surface);border-left:.25em solid var(--sk-color-outline)}summary{cursor:pointer}table{border-collapse:collapse;border:1px solid var(--sk-color-outline-variant);overflow-x:auto;font-size:.875em;width:100%}tfoot,thead{background-color:var(--sk-color-surface);color:var(--sk-color-tp-heading)}thead th{border:1px solid var(--sk-color-outline-variant);padding:.5em}tbody td{text-align:center;border:1px solid var(--sk-color-outline-variant);padding:.25em}.sk-content>*+*{--_sk-content-spacer:var(--sk-content-spacer, var(--content-default-spacer));--_sk-content-line-height:var( + --sk-content-line-height, + var(--content-default-line-height) + );margin-top:var(--_sk-content-spacer);line-height:var(--_sk-content-line-height)}.sk-content--sm{--sk-content-spacer:0.75em}.sk-content--xsm{--sk-content-spacer:0.5em}.row{--_grid-row-spacer:var(--grid-row-spacer, 1em);display:grid;gap:var(--_grid-row-spacer)}.column{--_grid-column-spacer:var(--grid-column-spacer, 1em);display:flex;flex-wrap:wrap;gap:var(--grid-column-spacer)}.wrapper,.wrapper-md,.wrapper-sm{margin:0 auto;background:var(--sk-color-background)}.wrapper{max-width:var(--bp-default)}.wrapper-md{max-width:var(--bp-medium)}.wrapper-sm{max-width:var(--bp-small)}.wrapper-dynamic{max-width:100%}.sk-button,a.sk-button,button.sk-button{--_sk-btn-bg:var(--sk-btn-bg, var(--sk-color-accent));--_sk-btn-color:var(--sk-btn-color, var(--sk-color-on-accent));--_sk-btn-border:var(--sk-btn-border, var(--sk_sk-btn-bg));display:flex;align-items:center;justify-content:center;width:fit-content;padding:var(--btn-padding);background:var(--_sk-btn-bg);color:var(--_sk-btn-color);border:1px solid var(--_sk-btn-border);border-radius:var(--btn-radius);font-weight:500;text-decoration:none;cursor:pointer;gap:var(--btn-spacer)}.sk-button:hover{--_sk-btn-bg-hover:var(--sk-btn-bg-hover, var(--sk-color-accent--state));--_sk-btn-color-hover:var(--sk-btn-color-hover, var(--sk-color-on-accent));--_sk-btn-border-hover:var(--sk-btn-border-hover, var(--sk-btn-bg-hover));background:var(--_sk-btn-bg-hover);color:var(--_sk-btn-color-hover);border-color:var(--_sk-btn-border-hover)}.sk-button:active{scale:0.975;border-radius:calc(var(--btn-radius)/ 2);transition:var(--an-global-ease)}.sk-button:focus,.sk-button:focus-within{outline:.25em solid var(--sk-color-focus);transition:var(--an-global-ease)}.sk-button--primary{--sk-btn-bg:var(--sk-color-primary);--sk-btn-color:var(--sk-color-on-primary);--sk-btn-bg-hover:var(--sk-color-primary--state);--sk-btn-color-hover:var(--sk-color-on-primary)}.sk-button--tonal{--sk-btn-bg:var(--sk-color-secondary);--sk-btn-color:var(--sk-color-on-secondary);--sk-btn-bg-hover:var(--sk-color-secondary--state);--sk-btn-color-hover:var(--sk-btn-color)}.sk-button--stroke{--sk-btn-bg:transparent;--sk-btn-color:var(--sk-color-on-background);--sk-btn-border:var(--sk-color-outline);--sk-btn-bg-hover:var(--sk-color-surface);--sk-btn-color-hover:var(--sk-color-on-surface);--sk-btn-border-hover:var(--sk-color-outline);box-shadow:0 1px 2px 0 rgba(0,0,0,.25)}.sk-button--unlimited{--sk-btn-bg:var(--sk-color-surface);--sk-btn-color:var(--sk-color-on-surface);--sk-btn-bg-hover:var(--sk-color-surface--state);--sk-btn-color-hover:var(--sk-color-on-background)}.sk-button.sk-button--link{--sk-btn-bg:transparent;--sk-btn-color:var(--sk-color-primary);--sk-btn-bg-hover:var(--sk-color-surface);--sk-btn-color-hover:var(--sk-color-primary);text-decoration:underline}.sk-button-container,sk-button-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--btn-container-spacer)}.sk-button-container[data-direction=row],sk-button-container[data-direction=row]{flex-direction:row}.sk-button-container[data-direction=column],sk-button-container[data-direction=column]{flex-direction:column;align-items:start;max-width:365px}.sk-button-container[data-direction=column] *,sk-button-container[data-direction=column] *{min-width:100%}.sk-infobox,sk-infobox{--_sk-infobox-bg:var(--sk-infobox-bg, var(--sk-color-accent-container));--_sk-infobox-color:var( + --sk-infobox-color, + var(--sk-color-accent-on-container) + );--_sk-infobox-stroke:var( + --sk-infobox-stroke, + var(--sk-color-accent-container-outline) + );font-size:var(--infobox-ft-size);padding:var(--infobox-padding);background:var(--_sk-infobox-bg);color:var(--_sk-infobox-color);border-radius:var(--infobox-radius);border:1px solid var(--_sk-infobox-stroke)}.sk-infobox--info{--sk-infobox-bg:var(--sk-color-primary-container);--sk-infobox-color:var(--sk-color-on-primary-container);--sk-infobox-stroke:var(--sk-color-primary)}.sk-infobox--error{--sk-infobox-bg:var(--sk-color-error-container);--sk-infobox-color:var(--sk-color-on-error-container);--sk-infobox-stroke:var(--sk-color-error)}.sk-infobox--warning{--sk-infobox-bg:var(--sk-color-warning-container);--sk-infobox-color:var(--sk-color-on-warning-container);--sk-infobox-stroke:var(--sk-color-warning)}.sk-infobox--extras{display:flex;align-items:center;gap:.5em}.sk-infobox--extras ion-icon{font-size:1.5em} \ No newline at end of file diff --git a/package.json b/package.json index 6c4a3e9..836af14 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "The UI framework and design language made by SurfScape.", "main": "css/index.css", "scripts": { - "build-css": "cleancss -o \"dist/surfkit.min.css\" \"css/index.css\"", + "build-css": "cleancss -o \"dist/surfkit.bundle.css\" \"css/index.css\"", "build-js": "uglifyjs -o \"dist/js.min.js\" \"js/*.js\"", "build-dist": "npm run build-css && npm run build-js" },