@knitli/docs-components 1.3.1 → 1.3.4

package/dist/assets/styles/textures.css

@@ -1,668 +0,0 @@
-/*
- * 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;
-  }
-}