pallote-css 0.3.11 → 0.3.12

package/dist/styles/utilities/_text.scss

@@ -0,0 +1,207 @@
+@use "sass:list";
+@use "../common/mixins";
+@use "../common/variables";
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// align
+// weight
+// transform
+// italic
+// underline
+// strikeThrough
+// code
+// color
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// elements
+// —————————————————————————————————————————————————————————————————
+
+@mixin font-size($font-size, $font-weight, $line-height) {
+	font-size: $font-size;
+	font-weight: $font-weight;
+	line-height: $line-height;
+}
+
+.h1, %h1 {
+	@include font-size(
+		variables.$h1-size,
+		variables.$h1-weight,
+		variables.$h1-line-height
+	);
+}
+
+.h2, %h2 {
+	@include font-size(
+		variables.$h2-size,
+		variables.$h2-weight,
+		variables.$h2-line-height
+	);
+}
+
+.h3, %h3 {
+	@include font-size(
+		variables.$h3-size,
+		variables.$h3-weight,
+		variables.$h3-line-height
+	);
+}
+
+.h4, %h4 {
+	@include font-size(
+		variables.$h4-size,
+		variables.$h4-weight,
+		variables.$h4-line-height
+	);
+}
+
+.h5, %h5 {
+	@include font-size(
+		variables.$h5-size,
+		variables.$h5-weight,
+		variables.$h5-line-height
+	);
+}
+
+.h6, %h6 {
+	@include font-size(
+		variables.$h6-size,
+		variables.$h6-weight,
+		variables.$h6-line-height
+	);
+}
+
+.subtitle, %subtitle {
+	@include font-size(
+		variables.$subtitle-size,
+		variables.$subtitle-weight,
+		variables.$subtitle-line-height
+	);
+}
+
+.body, %body {
+	@include font-size(
+		variables.$body-size,
+		variables.$body-weight,
+		variables.$body-line-height
+	);
+}
+
+.caption, %caption {
+	@include font-size(
+		variables.$caption-size,
+		variables.$caption-weight,
+		variables.$caption-line-height
+	);
+}
+
+.overline, %overline {
+	@include font-size(
+		variables.$overline-size,
+		variables.$overline-weight,
+		variables.$overline-line-height
+	);
+}
+
+@mixin gutter {
+
+	& + & {
+		margin-top: .75em;
+	}
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, 
+.subtitle, .body, .caption, .overline {
+	@include gutter;
+}
+
+// —————————————————————————————————————————————————————————————————
+// align
+// —————————————————————————————————————————————————————————————————
+
+.text-left, %text-left { text-align: left !important; }
+.text-center, %text-center { text-align: center !important; }
+.text-right, %text-right { text-align: right !important; }
+
+// —————————————————————————————————————————————————————————————————
+// weight
+// —————————————————————————————————————————————————————————————————
+
+.text-regular, %text-regular { font-weight: variables.$font-regular !important; }
+.text-bold, %text-bold { font-weight: variables.$font-bold !important; }
+
+// —————————————————————————————————————————————————————————————————
+// transform
+// —————————————————————————————————————————————————————————————————
+
+.text-none, %text-none { text-transform: none; }
+.text-capitalize, %text-capitalize { text-transform: capitalize; }
+.text-uppercase, %text-uppercase { text-transform: uppercase; }
+.text-lowercase, %text-lowercase { text-transform: lowercase; }
+.text-initial, %text-initial { text-transform: initial; }
+.text-inherit, %text-inherit { text-transform: inherit; }
+
+// —————————————————————————————————————————————————————————————————
+// italic
+// —————————————————————————————————————————————————————————————————
+
+.text-italic, %text-italic { font-style: italic !important; }
+
+// —————————————————————————————————————————————————————————————————
+// underline
+// —————————————————————————————————————————————————————————————————
+
+.text-underline, %text-underline { text-decoration: underline !important; }
+
+// —————————————————————————————————————————————————————————————————
+// strikeThrough
+// —————————————————————————————————————————————————————————————————
+
+.text-strikeThrough, %text-strikeThrough { text-decoration: line-through !important; }
+
+// —————————————————————————————————————————————————————————————————
+// code
+// —————————————————————————————————————————————————————————————————
+
+.text-code, %text-code { font-family: variables.$font-code !important; }
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($prefix, $colors...) {
+	@each $i in $colors {
+		.#{$prefix}#{list.nth($i, 1)} {
+			color: list.nth($i, 2) !important;
+
+			.h1, .h2, .h3, .h4, .h5, .h6 {
+				color: list.nth($i, 2) !important;
+			}
+
+			&.link {
+				text-decoration: underline rgba(list.nth($i, 2), 0.5);
+
+				@include mixins.hover {
+					text-decoration: underline 0.125em;
+				}	
+			}
+		}
+	}
+}
+
+@include color('text-',
+	'default' variables.$text,
+	'alt' variables.$text-alt,
+	'disabled' variables.$text-disabled,
+	'contrast' variables.$text-contrast,
+	'contrastAlt' variables.$text-contrast-alt,
+	'contrastDisabled' variables.$text-contrast-disabled,
+	'primary' variables.$primary,
+	'secondary' variables.$secondary,
+	'primary' variables.$primary,
+	'success' variables.$success,
+	'info' variables.$info,
+	'warning' variables.$warning,
+	'error' variables.$error,
+);

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "pallote-css",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "CSS component library",
-  "main": "dist/pallote.min.css",
-  "styles": "dist/pallote.min.css",
+  "main": "dist/pallote.scss",
+  "styles": "dist/pallote.scss",
   "files": [
     "dist/*"
   ],
+  "publishConfig": {
+    "directory": "dist"
+  },
   "scripts": {
-    "dev": "bundle exec jekyll serve & onchange 'src/styles/**/*.scss' 'src/scripts/**/*.js' -- npm run build",
+    "dev": "onchange 'src/styles/**/*.scss' 'src/scripts/**/*.js' -- npm run build",
     "build": "npm run build:js && npm run build:css",
     "build:assets": "ncp src/assets dist/assets",
-    "build:css": "sass src/pallote.scss dist/pallote.min.css --style=compressed",
+    "build:css": "sass src/pallote.scss dist/pallote.min.css --style=compressed && ncp src/styles dist/styles && ncp src/pallote.scss dist/pallote.scss",
     "build:js": "uglifyjs src/scripts/*.js -o dist/pallote.min.js"
   },
   "repository": {
@@ -32,7 +35,6 @@
   "devDependencies": {
     "ncp": "^2.0.0",
     "onchange": "^7.1.0",
-    "pallote-css": "^0.2.7",
     "sass": "^1.71.1",
     "uglify-js": "^3.17.4"
   }

package/dist/assets/icons/logos/patreon.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.0873 7.60923C22.0835 4.80015 19.8957 2.49789 17.3288 1.66718C14.1413 0.635628 9.93721 0.785146 6.89347 2.22126C3.20439 3.96211 2.04552 7.77545 2.00233 11.5786C1.96689 14.7055 2.27896 22.941 6.92423 22.9997C10.3758 23.0435 10.8897 18.596 12.4868 16.4541C13.623 14.9301 15.086 14.4997 16.887 14.054C19.9823 13.2879 22.0918 10.8451 22.0873 7.60923Z" fill="currentColor"/>
-</svg>

package/dist/assets/icons/phosphor/arrow-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>

package/dist/assets/icons/phosphor/arrow-square-out.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg>

package/dist/assets/icons/phosphor/caret-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg>

package/dist/assets/icons/phosphor/check-circle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

package/dist/assets/icons/phosphor/check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>

package/dist/assets/icons/phosphor/coffee.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"></path></svg>

package/dist/assets/icons/phosphor/download-simple.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"></path></svg>

package/dist/assets/icons/phosphor/envelope-simple.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg>

package/dist/assets/icons/phosphor/files.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M213.66,66.34l-40-40A8,8,0,0,0,168,24H88A16,16,0,0,0,72,40V56H56A16,16,0,0,0,40,72V216a16,16,0,0,0,16,16H168a16,16,0,0,0,16-16V200h16a16,16,0,0,0,16-16V72A8,8,0,0,0,213.66,66.34ZM168,216H56V72h76.69L168,107.31v84.53c0,.06,0,.11,0,.16s0,.1,0,.16V216Zm32-32H184V104a8,8,0,0,0-2.34-5.66l-40-40A8,8,0,0,0,136,56H88V40h76.69L200,75.31Zm-56-32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,152Zm0,32a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h48A8,8,0,0,1,144,184Z"></path></svg>

package/dist/assets/icons/phosphor/info.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>

package/dist/assets/icons/phosphor/warning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>

package/dist/assets/icons/phosphor/x-circle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

package/dist/assets/icons/rabbit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rabbit"><path d="M20 8.54V4a2 2 0 1 0-4 0v3"/><path d="M7.61 12.53a3 3 0 1 0-1.6 4.3" color="white"/><path d="M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1.93 1.93 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1c-1.7 0-3 1.3-3 3"/><path d="M13 16a3 3 0 0 1 2.24 5"/><path d="M18 12h.01" color="white"/></svg>