ply-css 1.3.0

package/src/scss/components/_typography.scss

@@ -0,0 +1,565 @@
+@use "sass:math";
+
+@use "sass:color";
+@use "colors";
+@use "mixins";
+@use "variables";
+
+// =Typography
+// ----------------------------------------------------------------------------
+body {
+  @include mixins.square;
+
+  background: var(--ply-bg-body, colors.$background-body);
+  color: var(--ply-color-body, colors.$color-body);
+  font-family: var(--ply-font-body, #{variables.$font-family-base});
+  font-size: variables.$font-size-base;
+  line-height: variables.$base-line;
+  overflow: auto;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+// =Links
+// ----------------------------------------------------------------------------
+a {
+  @include mixins.transition;
+
+  color: var(--ply-color-link, colors.$color-link);
+
+  &:focus,
+  &:hover {
+    color: var(--ply-color-link-hover, colors.$color-link-hover);
+  }
+}
+
+// =Headings
+// ----------------------------------------------------------------------------
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  color: var(--ply-color-headings, colors.$color-headings);
+  font-family: var(--ply-font-heading, #{variables.$font-family-headings});
+  font-weight: variables.$header-font-weight;
+  margin: 0 0 0.5rem;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+.h1,
+h2,
+.h2 {
+  line-height: variables.$line-height-tight;
+}
+
+h3,
+.h3,
+h4,
+.h4 {
+  line-height: variables.$line-height-snug;
+}
+
+h1,
+.h1 {
+  font-size: variables.$font-size-h1-lg;
+}
+
+h2,
+.h2 {
+  font-size: variables.$font-size-h2-lg;
+}
+
+h3,
+.h3 {
+  font-size: variables.$font-size-h3-lg;
+}
+
+h4,
+.h4 {
+  font-size: variables.$font-size-h4-lg;
+}
+
+h5,
+.h5 {
+  font-size: variables.$font-size-h5-lg;
+  font-weight: normal;
+}
+
+h6,
+.h6 {
+  font-size: variables.$font-size-h6-lg;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+
+// =Lead
+// ----------------------------------------------------------------------------
+.lead-subhead,
+.lead {
+  font-size: variables.$font-size-lead;
+  line-height: variables.$line-height-lead;
+  margin-bottom: 1rem;
+}
+
+// =Line height and margin
+// ----------------------------------------------------------------------------
+p,
+ul,
+ol,
+dl,
+dd,
+dt,
+blockquote,
+td,
+th {
+  line-height: variables.$base-line;
+}
+
+ul,
+ol,
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin: 0 0 0 2rem;
+}
+
+ul li,
+ol li {
+  text-align: left;
+}
+
+ol ol li {
+  list-style-type: lower-alpha;
+}
+
+ol ol ol li {
+  list-style-type: lower-roman;
+}
+
+// =Definition list
+// ----------------------------------------------------------------------------
+dl dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: variables.$base-line;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+hr,
+pre,
+table,
+form,
+fieldset,
+figure,
+address {
+  margin-bottom: variables.$base-line;
+}
+
+// =Blockquote
+// ----------------------------------------------------------------------------
+blockquote {
+  position: relative;
+  font-style: italic;
+  font-size: variables.$font-size-lg;
+  margin-left: variables.$base-line * 1.5;
+  padding-left: variables.$base-line;
+  border-left: 2px solid var(--ply-border-color, colors.$color-blockquote-border);
+
+  p {
+    margin-bottom: 0.5rem;
+  }
+}
+
+small,
+blockquote small,
+blockquote p.small,
+blockquote p.citation
+cite,
+blockquote cite {
+  color: var(--ply-color-muted);
+  font-style: italic;
+  font-size: variables.$font-size-small;
+  line-height: 1;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+
+// =Address
+// ----------------------------------------------------------------------------
+address {
+  font-style: normal;
+}
+
+// =Text-level
+// ----------------------------------------------------------------------------
+s,
+del {
+  text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted var(--ply-color-body, colors.$color-black);
+  cursor: help;
+}
+
+strong,
+b {
+  font-weight: bold;
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+sub,
+sup {
+  font-size: variables.$font-size-smaller;
+  line-height: 0;
+  position: relative;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+figcaption {
+  margin: .3em 0;
+  font-size: variables.$font-size-small;
+  font-style: italic;
+}
+
+ins,
+u {
+  text-decoration: underline;
+}
+
+mark {
+  background-color: var(--ply-color-mark-bg, colors.$color-yellow);
+  color: var(--ply-color-mark, colors.$color-black);
+  text-decoration: none;
+}
+
+// =Code
+// ----------------------------------------------------------------------------
+pre,
+code,
+kbd,
+samp,
+var,
+output {
+  font-size: 90%;
+  font-style: normal;
+  font-family: var(--ply-font-mono, #{variables.$font-family-code});
+}
+
+pre {
+  margin-top: variables.$base-line;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  color: var(--ply-color-body, colors.$color-body);
+  background: var(--ply-color-code-bg, colors.$color-code-background);
+  border: 1px solid var(--ply-color-code-border, colors.$color-code-border);
+  border-radius: variables.$border-radius;
+  padding: 1rem;
+  overflow: auto;
+}
+
+code,
+samp,
+kbd {
+  padding: 3px 6px 2px 6px;
+  display: inline-block;
+  line-height: 1;
+  border-radius: 2px;
+}
+
+code {
+  background: var(--ply-color-code-bg, colors.$color-code-background);
+  border: 1px solid var(--ply-color-code-border, colors.$color-code-border);
+}
+
+pre code {
+  font-size: 100%;
+  border: none;
+  padding: 0;
+  background: none;
+  line-height: variables.$base-line;
+}
+
+var {
+  color: var(--ply-color-muted);
+}
+
+samp {
+  background: var(--ply-color-code-bg, colors.$color-blue-pastel);
+  border: 1px solid var(--ply-color-code-border, color.adjust(colors.$color-blue-pastel, $lightness: -7%));
+}
+
+kbd {
+  background: var(--ply-color-body, colors.$color-black);
+  color: var(--ply-bg-body, rgba(255, 255, 255, .85));
+  white-space: nowrap;
+}
+
+// =Form
+// ----------------------------------------------------------------------------
+button:active {
+  outline: none;
+}
+
+textarea,
+select {
+  font-family: var(--ply-font-body, #{variables.$font-family-controls});
+  font-size: 1em;
+  box-shadow: none;
+}
+
+textarea,
+select[multiple],
+select[multiple="multiple"] {
+  padding: variables.$padding-input;
+  line-height: 1.35em;
+  width: 100%;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="phone"],
+input[type="tel"],
+input[type="number"],
+input[type="datetime"],
+input[type="date"],
+input[type="month"],
+input[type="color"],
+input[type="time"],
+input[type="search"],
+input[type="datetime-local"] {
+  font-family: var(--ply-font-body, #{variables.$font-family-controls});
+  font-size: 1em;
+  box-shadow: none;
+  padding: variables.$padding-input;
+  line-height: variables.$base-line;
+  border-radius: 0;
+  outline: none;
+}
+
+select[multiple],
+select[multiple="multiple"],
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="phone"],
+input[type="tel"],
+input[type="number"],
+input[type="datetime"],
+input[type="date"],
+input[type="month"],
+input[type="color"],
+input[type="time"],
+input[type="search"],
+input[type="datetime-local"] {
+  background: var(--ply-color-input-bg, colors.$color-white);
+  border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
+  color: var(--ply-color-body, colors.$color-body);
+  position: relative;
+  z-index: 2;
+  appearance: none;
+}
+
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"],
+input[type="phone"],
+input[type="tel"],
+input[type="number"],
+input[type="datetime"],
+input[type="date"],
+input[type="month"],
+input[type="color"],
+input[type="time"],
+input[type="search"],
+input[type="datetime-local"] {
+  &[disabled] {
+    resize: none;
+    color: var(--ply-color-muted);
+  }
+}
+
+select,
+input[type="checkbox"],
+input[type="radio"] {
+  &[disabled] {
+    cursor: default;
+  }
+}
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input[type="range"] {
+  position: relative;
+  top: 3px;
+}
+
+select {
+  margin-bottom: 0 !important;
+}
+
+fieldset {
+  padding: variables.$base-line;
+  margin-bottom: variables.$base-line;
+  border: 1px solid var(--ply-border-color, colors.$color-fieldset-border);
+  & *:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+legend {
+  font-weight: bold;
+  padding: 0 1em;
+  margin-left: -1em;
+}
+
+
+// =Tables
+// ----------------------------------------------------------------------------
+table {
+  max-width: 100%;
+  width: 100%;
+  empty-cells: show;
+
+  caption {
+    text-transform: uppercase;
+    padding: 0 math.div(variables.$base-line, 1.5);
+    color: var(--ply-color-muted);
+    font-size: variables.$font-size-small;
+  }
+
+  th,
+  td {
+    border-bottom: 1px solid var(--ply-color-table-border, colors.$color-table-border);
+    padding: variables.$base-line * 0.5 math.div(variables.$base-line, 1.5);
+  }
+
+  tfoot th,
+  tfoot td {
+    color: var(--ply-color-muted);
+  }
+}
+
+// =Typography Responsive
+// -----------------------------------------------------------------------------
+
+// Portrait tablet to landscape and desktop
+@media (min-width: 768px) and (max-width: 979px) {
+  h1 {
+    font-size: variables.$font-size-h1-md;
+    line-height: variables.$line-height-tight;
+  }
+
+  h2 {
+    font-size: variables.$font-size-h2-md;
+    line-height: variables.$line-height-tight;
+  }
+
+  h3 {
+    font-size: variables.$font-size-h3-md;
+    line-height: variables.$line-height-snug;
+  }
+
+  h4 {
+    font-size: variables.$font-size-h4-md;
+    line-height: variables.$line-height-snug;
+  }
+
+  h5 {
+    font-size: variables.$font-size-h5-md;
+  }
+
+  h6 {
+    font-size: variables.$font-size-h6-md;
+  }
+}
+
+// Landscape phone to portrait tablet
+@media (max-width: 767px) {
+  h1 {
+    font-size: variables.$font-size-h1-sm;
+    line-height: variables.$line-height-tight;
+  }
+
+  h2 {
+    font-size: variables.$font-size-h2-sm;
+    line-height: variables.$line-height-tight;
+  }
+
+  h3 {
+    font-size: variables.$font-size-h3-sm;
+    line-height: variables.$line-height-snug;
+  }
+
+  h4 {
+    font-size: variables.$font-size-h4-sm;
+    line-height: variables.$line-height-snug;
+  }
+
+  h5 {
+    font-size: variables.$font-size-h5-sm;
+  }
+
+  h6 {
+    font-size: variables.$font-size-h6-sm;
+  }
+
+  .lead,
+  .lead-subhead {
+    font-size: variables.$font-size-lg;
+  }
+
+  ul,
+  ol,
+  ul ul,
+  ol ol,
+  ul ol,
+  ol ul {
+    margin-left: variables.$base-line;
+  }
+
+  blockquote {
+    margin-left: 0;
+  }
+}

package/src/scss/components/_upload.scss

@@ -0,0 +1,19 @@
+/* =Upload
+-----------------------------------------------------------------------------*/
+.tools-droparea {
+  position: relative;
+  overflow: hidden;
+  padding: 80px 20px;
+  border: 3px dashed rgba(0, 0, 0, .1);
+  &.drag-hover {
+    background: rgba(200, 222, 250, 0.75);
+  }
+  &.drag-drop {
+    background: rgba(250, 248, 200, 0.5);
+  }
+}
+.tools-droparea-placeholder {
+  text-align: center;
+  font-size: 11px;
+  color: rgba(0, 0, 0, .5);
+}

package/src/scss/components/_variables.scss

@@ -0,0 +1,129 @@
+// Font
+@use "sass:math";
+
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+$font-family-headings: $font-family-base;
+$font-family-controls: $font-family-base;
+$font-family-narrow: "Arial Narrow", sans-serif;
+$font-family-serif: "Georgia", serif;
+$font-family-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+$font-family-mono: $font-family-code;
+
+// Grid
+$grid-width: 1200;
+$grid-gutter-width: 0.5rem;
+
+// Type scale (rem-based, 16px root)
+$font-size-xs:   0.75rem;   // 12px
+$font-size-sm:   0.875rem;  // 14px
+$font-size-base: 1rem;      // 16px
+$font-size-lg:   1.125rem;  // 18px
+$font-size-xl:   1.5rem;    // 24px
+$font-size-2xl:  1.875rem;  // 30px
+$font-size-3xl:  2.25rem;   // 36px
+$font-size-4xl:  3rem;      // 48px
+$font-size-5xl:  3.75rem;   // 60px
+
+$font-size-print: 12pt;
+
+// Backward-compatible aliases
+$font-size-big: $font-size-lg;
+$font-size-small: $font-size-sm;
+$font-size-smaller: $font-size-xs;
+$font-size-lead: $font-size-xl;
+$line-height-lead: 1.5;
+
+// Font weights
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$header-font-weight: $font-weight-semibold;
+
+// Line heights
+$line-height-tight: 1.25;
+$line-height-snug: 1.375;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.625;
+$base-line: 1.5rem; // 24px
+
+// Line heights per text size (Tailwind convention)
+$line-height-xs:   1rem;      // 16px for 12px text
+$line-height-sm:   1.25rem;   // 20px for 14px text
+$line-height-base: 1.5rem;    // 24px for 16px text
+$line-height-lg:   1.75rem;   // 28px for 18px text
+$line-height-xl:   2rem;      // 32px for 24px text
+$line-height-2xl:  2.25rem;   // 36px for 30px text
+$line-height-3xl:  2.5rem;    // 40px for 36px text
+$line-height-4xl:  1;         // 48px for 48px text
+$line-height-5xl:  1;         // 60px for 60px text
+
+// HEADINGS
+
+// print
+$font-size-h1-print: 36pt;
+$font-size-h2-print: 24pt;
+$font-size-h3-print: 18pt;
+$font-size-h4-print: 14pt;
+$font-size-h5-print: 12pt;
+$font-size-h6-print: 12pt;
+
+// Large desktop
+$font-size-h1-lg: $font-size-5xl;  // 60px
+$font-size-h2-lg: $font-size-4xl;  // 48px
+$font-size-h3-lg: $font-size-3xl;  // 36px
+$font-size-h4-lg: $font-size-2xl;  // 30px
+$font-size-h5-lg: $font-size-xl;   // 24px
+$font-size-h6-lg: $font-size-sm;   // 14px
+
+// Portrait tablet to landscape and desktop
+$font-size-h1-md: $font-size-4xl;  // 48px
+$font-size-h2-md: $font-size-3xl;  // 36px
+$font-size-h3-md: $font-size-2xl;  // 30px
+$font-size-h4-md: $font-size-xl;   // 24px
+$font-size-h5-md: $font-size-lg;   // 18px
+$font-size-h6-md: $font-size-sm;   // 14px
+
+// Landscape phone to portrait tablet
+$font-size-h1-sm: $font-size-3xl;  // 36px
+$font-size-h2-sm: $font-size-2xl;  // 30px
+$font-size-h3-sm: $font-size-xl;   // 24px
+$font-size-h4-sm: $font-size-lg;   // 18px
+$font-size-h5-sm: $font-size-base; // 16px
+$font-size-h6-sm: $font-size-sm;   // 14px
+
+// Unit scale — shared by grid, container queries, and push utilities
+$unit-scale: (
+  100: 100%, 90: 90%, 88: 87.5%, 80: 80%, 75: 75%, 70: 70%,
+  66: 66.6%, 65: 65%, 62: 62.5%, 60: 60%, 50: 50%, 40: 40%,
+  38: 37.5%, 35: 35%, 33: 33.3%, 30: 30%, 25: 25%, 20: 20%,
+  12: 12.5%, 10: 10%
+);
+
+// Width scale — shared by width/height utilities and responsive width classes
+$width-scale: (
+  100: 100%, 90: 90%, 80: 80%, 75: 75%, 70: 70%,
+  66: 66.6%, 65: 65%, 60: 60%, 50: 50%, 40: 40%,
+  35: 35%, 33: 33.3%, 30: 30%, 25: 25%, 20: 20%, 10: 10%
+);
+
+// Base padding and spacing
+$padding: 0.75rem;
+$margin: 0.75rem;
+$border-radius: 0.25rem;
+$button-radius: 2rem;
+$shadow-depth: $grid-gutter-width * 0.5;
+
+// Input & Button Padding
+$padding-input-base: 0.5rem;
+$padding-btn-base: 0.625rem;
+$padding-btn-side-base: 1.5rem;
+$padding-btn-side-in-forms-base: 1rem;
+
+$padding-input: $padding-input-base 0.35rem;
+$padding-btn: $padding-btn-base $padding-btn-side-base;
+$padding-btn-outline: $padding-btn-base - (math.div(1, 16) * 1rem) $padding-btn-side-base;
+$padding-btn-outline-bold: $padding-btn-base - (math.div(1, 16) * 2rem) $padding-btn-side-base;
+$padding-btn-in-forms: $padding-input-base + (math.div(1, 16) * 1rem) $padding-btn-side-in-forms-base;
+$padding-btn-outline-in-forms: $padding-input-base $padding-btn-side-in-forms-base;
+$padding-btn-outline-bold-in-forms: $padding-input-base - (math.div(1, 16) * 1rem) $padding-btn-side-in-forms-base;

package/src/scss/ply-core.scss

@@ -0,0 +1 @@
+@use 'ply-core-components';

package/src/scss/ply-essentials.scss

@@ -0,0 +1,15 @@
+/*
+	ply 0.6.^
+	CSS Framework: ply :: https://github.com/thatgibbyguy/ply
+	Framework Author: @thatgibbyguy
+*/
+
+@forward 'components/colors';
+@forward 'components/variables';
+@forward 'components/media-queries';
+@forward 'components/mixins';
+@use 'components/helpers';
+
+@use 'components/grid';
+@use 'components/alignments';
+@use 'components/blocks';