@knitli/docs-components 1.1.2 → 1.1.3

package/dist/assets/styles/textures.css

@@ -0,0 +1,668 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Knitli Inc.
+ * SPDX-FileContributor: Adam Poulemanos <adam@knit.li>
+ *
+ * SPDX-License-Identifier: LicenseRef-KnitliProprietary
+ */
+
+/* ===================================================
+   TEXTURES - Knitli Landing Page
+   Literal Knit Patterns & Workshop Affordances
+   =================================================== */
+
+/* === KNITLI TEXTURES === */
+
+.knitli-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--texture-knit-pattern);
+  background-size: 180px 180px;
+  background-repeat: repeat;
+  opacity: 0.12;
+  /* More visible texture for tactile feel */
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.knitli-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Paper grain for depth */
+.knitli-section.with-grain::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--texture-noise);
+  background-size: 400px 400px;
+  opacity: 0.03;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* === CODEWEAVER TEXTURES === */
+
+/* Primary blueprint grid - more pronounced for drafting table feel */
+.codeweaver-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  /* Major grid lines */
+  background-image:
+    linear-gradient(to right, rgba(69, 91, 107, 0.08) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(69, 91, 107, 0.08) 1px, transparent 1px),
+    /* Minor grid lines */
+    linear-gradient(to right, rgba(69, 91, 107, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(69, 91, 107, 0.04) 1px, transparent 1px),
+    /* Original texture for depth */
+    var(--texture-grid-pattern);
+  background-size:
+    80px 80px,
+    80px 80px,
+    20px 20px,
+    20px 20px,
+    40px 40px;
+  background-repeat: repeat;
+  opacity: 1;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Blueprint corner marks - engineering paper aesthetic */
+.codeweaver-section::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  /* CSS custom properties for gradient parameters */
+  --gradient-copper-opacity: 0.08;
+  --gradient-blue-opacity: 0.05;
+  --gradient-copper-ellipse-width: 100%;
+  --gradient-copper-ellipse-height: 70%;
+  --gradient-blue-ellipse-width: 80%;
+  --gradient-blue-ellipse-height: 60%;
+  --gradient-copper-stop: 50%;
+  --gradient-blue-stop: 40%;
+
+  /* Top-left corner mark */
+  background:
+    linear-gradient(
+      135deg,
+      transparent 20px,
+      rgba(181, 108, 48, 0.15) 20px,
+      rgba(181, 108, 48, 0.15) 22px,
+      transparent 22px
+    ), /* Bottom-right corner mark */
+    linear-gradient(
+      -45deg,
+      transparent 20px,
+      rgba(69, 91, 107, 0.12) 20px,
+      rgba(69, 91, 107, 0.12) 22px,
+      transparent 22px
+    ), /* Warm copper gradient wash from top-left */
+    radial-gradient(
+      ellipse var(--gradient-copper-ellipse-width)
+        var(--gradient-copper-ellipse-height) at 15% 10%,
+      rgba(181, 108, 48, var(--gradient-copper-opacity)) 0%,
+      transparent var(--gradient-copper-stop)
+    ), /* Cool blue-gray gradient from bottom-right for balance */
+    radial-gradient(
+      ellipse var(--gradient-blue-ellipse-width)
+        var(--gradient-blue-ellipse-height) at 90% 85%,
+      rgba(69, 91, 107, var(--gradient-blue-opacity)) 0%,
+      transparent var(--gradient-blue-stop)
+    );
+  background-position:
+    top left,
+    bottom right,
+    top left,
+    bottom right;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Mobile adjustments to reduce radial gradient visibility */
+@media (max-width: 768px) {
+  .codeweaver-section::after {
+    /* Override only the varying parameters for mobile */
+    --gradient-copper-opacity: 0.02;
+    --gradient-blue-opacity: 0.02;
+    --gradient-copper-ellipse-width: 80%;
+    --gradient-copper-ellipse-height: 50%;
+    --gradient-blue-ellipse-width: 60%;
+    --gradient-blue-ellipse-height: 40%;
+    --gradient-copper-stop: 40%;
+    --gradient-blue-stop: 30%;
+  }
+}
+
+.codeweaver-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* === WORKBENCH DIVIDERS === */
+
+.simple-divider {
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--workshop-border) 2%,
+    var(--workshop-border) 98%,
+    transparent 100%
+  );
+  box-shadow: 0 1px 0 var(--workshop-bevel);
+  /* Beveled edge */
+  margin: var(--space-3xl) 0;
+}
+
+.simple-divider.knitli {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--knitli-rust) 2%,
+    var(--knitli-rust) 98%,
+    transparent 100%
+  );
+}
+
+.simple-divider.codeweaver {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--cw-primary) 2%,
+    var(--cw-primary) 98%,
+    transparent 100%
+  );
+}
+
+/* === TOOL DRAWER LABELS === */
+
+.workshop-label {
+  font-family: var(--font-bridge);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: var(--font-2xs);
+  font-weight: 700;
+  padding: 0.375rem 1rem;
+  background: var(--knitli-aubergine);
+  color: var(--knitli-parchment);
+  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
+  /* Chamfered */
+  box-shadow:
+    0 2px 4px var(--workshop-shadow),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+  display: inline-block;
+}
+
+.workshop-label.codeweaver {
+  background: var(--cw-blue-gray);
+  color: var(--cw-cream);
+}
+
+/* === CHAMFERED CORNERS === */
+
+.card-workshop {
+  clip-path: polygon(
+    8px 0,
+    100% 0,
+    100% calc(100% - 8px),
+    calc(100% - 8px) 100%,
+    0 100%,
+    0 8px
+  );
+}
+
+/* Smaller chamfer for badges */
+.badge-workshop {
+  clip-path: polygon(
+    4px 0,
+    100% 0,
+    100% calc(100% - 4px),
+    calc(100% - 4px) 100%,
+    0 100%,
+    0 4px
+  );
+}
+
+/* === BEVELED EDGES === */
+
+.bevel-top {
+  box-shadow: inset 0 1px 0 var(--workshop-bevel);
+}
+
+.bevel-bottom {
+  box-shadow: inset 0 -1px 0 var(--workshop-bevel);
+}
+
+.bevel-all {
+  box-shadow:
+    inset 0 1px 0 var(--workshop-bevel),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* === DEPTH & SHADOW === */
+
+.workshop-depth-sm {
+  box-shadow: 0 2px 4px var(--workshop-shadow);
+}
+
+.workshop-depth-md {
+  box-shadow:
+    0 4px 8px var(--workshop-shadow),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.workshop-depth-lg {
+  box-shadow:
+    0 8px 16px var(--workshop-shadow),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
+}
+
+/* === PRESSED EFFECT === */
+
+.pressed {
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.1),
+    0 1px 2px var(--workshop-shadow);
+  transform: translateY(1px);
+}
+
+/* === TEXTURED BACKGROUNDS === */
+
+.bg-knit {
+  background-image: var(--texture-knit-pattern);
+  background-size: 180px 180px;
+  background-repeat: repeat;
+}
+
+.bg-grid {
+  background-image: var(--texture-grid-pattern);
+  background-size: 40px 40px;
+  background-repeat: repeat;
+}
+
+.bg-noise {
+  background-image: var(--texture-noise);
+  background-size: 400px 400px;
+  background-repeat: repeat;
+}
+
+/* === TEXTURE OVERLAYS === */
+
+.overlay-knit {
+  position: relative;
+}
+
+.overlay-knit::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--texture-knit-pattern);
+  background-size: 180px 180px;
+  opacity: 0.07;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.overlay-grid {
+  position: relative;
+}
+
+.overlay-grid::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(69, 91, 107, 0.06) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(69, 91, 107, 0.06) 1px, transparent 1px),
+    var(--texture-grid-pattern);
+  background-size:
+    40px 40px,
+    40px 40px,
+    40px 40px;
+  opacity: 1;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* === BORDER STYLES === */
+
+.border-workshop {
+  border: 2px solid var(--workshop-border);
+  box-shadow: 0 1px 0 var(--workshop-bevel);
+}
+
+.border-knitli {
+  border: 2px solid var(--knitli-aubergine);
+  box-shadow: 0 1px 0 var(--workshop-bevel);
+}
+
+.border-codeweaver {
+  border: 2px solid var(--cw-primary);
+  box-shadow: 0 1px 0 var(--workshop-bevel);
+}
+
+/* === MOBILE ADJUSTMENTS === */
+
+@media (max-width: 768px) {
+  /* Reduce texture opacity on mobile for better readability */
+  .knitli-section::before {
+    opacity: 0.05;
+  }
+
+  .codeweaver-section::before {
+    opacity: 0.03;
+  }
+
+  /* Smaller chamfer on mobile */
+  .card-workshop {
+    clip-path: polygon(
+      6px 0,
+      100% 0,
+      100% calc(100% - 6px),
+      calc(100% - 6px) 100%,
+      0 100%,
+      0 6px
+    );
+  }
+}
+
+/* ===================================================
+   TORN PAPER & FABRIC EDGE TREATMENTS
+   Organic, handcrafted edge character
+   =================================================== */
+
+/* === TORN PAPER EDGE (TOP) === */
+.torn-edge-top {
+  position: relative;
+}
+
+.torn-edge-top::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 12px;
+  background: inherit;
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 12' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,12 L0,4 Q15,6 30,3 T60,5 T90,2 T120,6 T150,3 T180,5 T210,2 T240,4 T270,6 T300,3 T330,5 T360,2 T390,4 T420,6 T450,3 T480,5 T510,2 T540,4 T570,6 T600,3 T630,5 T660,2 T690,4 T720,6 T750,3 T780,5 T810,2 T840,4 T870,6 T900,3 T930,5 T960,2 T990,4 T1020,6 T1050,3 T1080,5 T1110,2 T1140,4 T1170,6 T1200,3 L1200,12 Z' fill='white'/%3E%3C/svg%3E");
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 12' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,12 L0,4 Q15,6 30,3 T60,5 T90,2 T120,6 T150,3 T180,5 T210,2 T240,4 T270,6 T300,3 T330,5 T360,2 T390,4 T420,6 T450,3 T480,5 T510,2 T540,4 T570,6 T600,3 T630,5 T660,2 T690,4 T720,6 T750,3 T780,5 T810,2 T840,4 T870,6 T900,3 T930,5 T960,2 T990,4 T1020,6 T1050,3 T1080,5 T1110,2 T1140,4 T1170,6 T1200,3 L1200,12 Z' fill='white'/%3E%3C/svg%3E");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  z-index: 10;
+  pointer-events: none;
+}
+
+/* === TORN PAPER EDGE (BOTTOM) === */
+.torn-edge-bottom {
+  position: relative;
+}
+
+.torn-edge-bottom::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 12px;
+  background: inherit;
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 12' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,8 Q15,6 30,9 T60,7 T90,10 T120,6 T150,9 T180,7 T210,10 T240,8 T270,6 T300,9 T330,7 T360,10 T390,8 T420,6 T450,9 T480,7 T510,10 T540,8 T570,6 T600,9 T630,7 T660,10 T690,8 T720,6 T750,9 T780,7 T810,10 T840,8 T870,6 T900,9 T930,7 T960,10 T990,8 T1020,6 T1050,9 T1080,7 T1110,10 T1140,8 T1170,6 T1200,9 L1200,0 Z' fill='white'/%3E%3C/svg%3E");
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 12' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,8 Q15,6 30,9 T60,7 T90,10 T120,6 T150,9 T180,7 T210,10 T240,8 T270,6 T300,9 T330,7 T360,10 T390,8 T420,6 T450,9 T480,7 T510,10 T540,8 T570,6 T600,9 T630,7 T660,10 T690,8 T720,6 T750,9 T780,7 T810,10 T840,8 T870,6 T900,9 T930,7 T960,10 T990,8 T1020,6 T1050,9 T1080,7 T1110,10 T1140,8 T1170,6 T1200,9 L1200,0 Z' fill='white'/%3E%3C/svg%3E");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  z-index: 10;
+  pointer-events: none;
+}
+
+/* === FABRIC FRAYED EDGE (HORIZONTAL) === */
+.frayed-edge-top {
+  position: relative;
+}
+
+.frayed-edge-top::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: repeating-linear-gradient(
+    90deg,
+    transparent 0px,
+    transparent 3px,
+    currentColor 3px,
+    currentColor 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  opacity: 0.15;
+  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+  z-index: 5;
+  pointer-events: none;
+}
+
+.frayed-edge-bottom {
+  position: relative;
+}
+
+.frayed-edge-bottom::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: repeating-linear-gradient(
+    90deg,
+    transparent 0px,
+    transparent 3px,
+    currentColor 3px,
+    currentColor 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  opacity: 0.15;
+  mask-image: linear-gradient(to top, black 0%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* === STITCHED BORDER EDGE === */
+.stitched-edge {
+  position: relative;
+}
+
+.stitched-edge::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 24px;
+  right: 24px;
+  height: 0;
+  border-top: 2px dashed var(--knitli-rust);
+  opacity: 0.4;
+  z-index: 5;
+}
+
+.stitched-edge::after {
+  content: "";
+  position: absolute;
+  bottom: 12px;
+  left: 24px;
+  right: 24px;
+  height: 0;
+  border-top: 2px dashed var(--knitli-rust);
+  opacity: 0.4;
+  z-index: 5;
+}
+
+/* CodeWeaver variant */
+.stitched-edge.codeweaver::before,
+.stitched-edge.codeweaver::after {
+  border-color: var(--cw-primary);
+  opacity: 0.25;
+}
+
+/* === FABRIC FOLD SHADOW === */
+.fabric-crease {
+  position: relative;
+}
+
+.fabric-crease::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0, 0, 0, 0.08) 20%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.08) 80%,
+    transparent 100%
+  );
+  box-shadow:
+    -1px 0 0 rgba(255, 255, 255, 0.5),
+    1px 0 0 rgba(0, 0, 0, 0.03);
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* === HANDMADE PAPER CORNER === */
+.paper-corner {
+  position: relative;
+}
+
+.paper-corner::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  background: linear-gradient(
+    135deg,
+    transparent 50%,
+    rgba(0, 0, 0, 0.03) 50%,
+    rgba(0, 0, 0, 0.06) 100%
+  );
+  z-index: 3;
+}
+
+/* Folded corner effect */
+.paper-fold {
+  position: relative;
+  overflow: hidden;
+}
+
+.paper-fold::before {
+  content: "";
+  position: absolute;
+  top: -12px;
+  right: -12px;
+  width: 24px;
+  height: 24px;
+  background: var(--knitli-parchment);
+  box-shadow:
+    -2px 2px 4px rgba(0, 0, 0, 0.1),
+    inset 1px -1px 0 rgba(0, 0, 0, 0.05);
+  transform: rotate(45deg);
+  z-index: 10;
+}
+
+.paper-fold.codeweaver::before {
+  background: var(--cw-cream);
+}
+
+/* === WOVEN BORDER === */
+.woven-border {
+  position: relative;
+  border: none;
+}
+
+.woven-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 3px solid transparent;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      var(--knitli-rust) 0px,
+      var(--knitli-rust) 8px,
+      transparent 8px,
+      transparent 12px
+    )
+    top / 100% 3px no-repeat,
+    repeating-linear-gradient(
+      90deg,
+      var(--knitli-rust) 0px,
+      var(--knitli-rust) 8px,
+      transparent 8px,
+      transparent 12px
+    )
+    bottom / 100% 3px no-repeat,
+    repeating-linear-gradient(
+      0deg,
+      var(--knitli-rust) 0px,
+      var(--knitli-rust) 8px,
+      transparent 8px,
+      transparent 12px
+    )
+    left / 3px 100% no-repeat,
+    repeating-linear-gradient(
+      0deg,
+      var(--knitli-rust) 0px,
+      var(--knitli-rust) 8px,
+      transparent 8px,
+      transparent 12px
+    )
+    right / 3px 100% no-repeat;
+  opacity: 0.4;
+  pointer-events: none;
+  z-index: 5;
+}
+
+/* === SECTION EDGE SHADOW (BETWEEN SECTIONS) === */
+.section-shadow-bottom {
+  box-shadow:
+    inset 0 -20px 30px -20px rgba(0, 0, 0, 0.08),
+    0 4px 12px -4px rgba(0, 0, 0, 0.06);
+}
+
+.section-shadow-top {
+  box-shadow: inset 0 20px 30px -20px rgba(0, 0, 0, 0.06);
+}
+
+/* === MOBILE ADJUSTMENTS FOR EDGES === */
+@media (max-width: 768px) {
+  .torn-edge-top::before,
+  .torn-edge-bottom::after {
+    height: 8px;
+  }
+
+  .frayed-edge-top::before,
+  .frayed-edge-bottom::after {
+    height: 5px;
+  }
+
+  .paper-fold::before {
+    width: 16px;
+    height: 16px;
+    top: -8px;
+    right: -8px;
+  }
+}