ply-css 1.3.0

package/src/scss/components/_notifications.scss

@@ -0,0 +1,185 @@
+@use "sass:list";
+@use "colors";
+@use "variables";
+
+/* =Notifications
+-----------------------------------------------------------------------------*/
+
+$alert-colors: (
+  "blue":   (#edf5ff, #0043ce, #001d6c, #4589ff),
+  "red":    (#fff1f1, #da1e28, #2d0709, #ff8389),
+  "yellow": (#fdf6dd, #f1c21b, #302400, #f1c21b),
+  "green":  (#defbe6, #198038, #071908, #42be65),
+  "black":  (#e0e0e0, #161616, #262626, #8d8d8d),
+);
+
+.tools-alert,
+.alert {
+  padding: 0.75rem 1rem;
+  background: var(--ply-bg-surface-alt, colors.$color-gray-pastel);
+  color: var(--ply-color-body, colors.$color-black);
+  margin-bottom: variables.$base-line;
+  border-radius: variables.$border-radius;
+  border-left: 4px solid colors.$color-gray-dark;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+
+  // Stacked layout — column direction for multi-line alerts (e.g. CTA blocks)
+  &.tools-alert-stack,
+  &.alert-stack {
+    flex-direction: column;
+  }
+
+  .tools-alert-icon,
+  .alert-icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.125rem;
+  }
+
+  .tools-alert-content,
+  .alert-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .tools-alert-dismiss,
+  .alert-dismiss {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: inherit;
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+    line-height: 1;
+    font-size: 1.25rem;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: -0.5rem -0.375rem -0.5rem 0;
+    border-radius: variables.$border-radius;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      opacity: 1;
+      outline: 2px solid var(--ply-color-focus, #0f62fe);
+      outline-offset: -2px;
+    }
+
+    &::before {
+      content: '\00D7';
+    }
+  }
+}
+
+// Light alert color variants — Carbon-inspired support tints
+@each $name, $values in $alert-colors {
+  $light-bg: list.nth($values, 1);
+  $light-border: list.nth($values, 2);
+
+  .tools-alert-#{$name},
+  .alert-#{$name} {
+    background: $light-bg;
+    border-left-color: $light-border;
+  }
+}
+
+// Outline variant — keeps tinted bg, adds full border
+.tools-alert-outline,
+.alert-outline {
+  border: 1px solid colors.$color-gray-dark;
+  border-left-width: 4px;
+}
+
+@each $name, $values in $alert-colors {
+  $light-border: list.nth($values, 2);
+
+  .tools-alert-outline.tools-alert-#{$name},
+  .alert-outline.alert-#{$name} {
+    border-color: $light-border;
+  }
+}
+
+// Ghost variant — transparent bg, border only
+.tools-alert-ghost,
+.alert-ghost {
+  background: transparent;
+  border: 1px solid colors.$color-gray-dark;
+  border-left-width: 4px;
+}
+
+@each $name, $values in $alert-colors {
+  $light-border: list.nth($values, 2);
+
+  .tools-alert-ghost.tools-alert-#{$name},
+  .alert-ghost.alert-#{$name} {
+    background: transparent;
+    border-color: $light-border;
+  }
+}
+
+// Toast messages — alerts positioned fixed in the top-right
+.tools-message,
+.message {
+  position: fixed;
+  z-index: 110;
+  top: 10px;
+  right: 10px;
+  max-width: 350px;
+  border-left: none;
+}
+
+// Dark alert variants — Carbon Gray 90 tinted
+@mixin dark-alerts {
+  .tools-alert,
+  .alert {
+    background: var(--ply-bg-surface-alt);
+    color: var(--ply-color-body);
+    border-left-color: #6f6f6f;
+  }
+
+  @each $name, $values in $alert-colors {
+    $dark-bg: list.nth($values, 3);
+    $dark-border: list.nth($values, 4);
+
+    .tools-alert-#{$name},
+    .alert-#{$name} {
+      background: $dark-bg;
+      border-left-color: $dark-border;
+    }
+
+    .tools-alert-outline.tools-alert-#{$name},
+    .alert-outline.alert-#{$name} {
+      border-color: $dark-border;
+    }
+
+    .tools-alert-ghost.tools-alert-#{$name},
+    .alert-ghost.alert-#{$name} {
+      border-color: $dark-border;
+    }
+  }
+
+  .tools-alert-ghost,
+  .alert-ghost {
+    background: transparent;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include dark-alerts;
+  }
+}
+
+[data-theme="dark"] {
+  @include dark-alerts;
+}

package/src/scss/components/_prettyprint.scss

@@ -0,0 +1,86 @@
+/* string content */
+.str {
+  color: #dd1144;
+}
+
+/* a keyword */
+.kwd {
+  color: #333333;
+}
+
+/* a comment */
+.com {
+  color: #999988;
+}
+
+/* a type name */
+.typ {
+  color: #445588;
+}
+
+/* a literal value */
+.lit {
+  color: #445588;
+}
+
+/* punctuation */
+.pun {
+  color: #888;
+}
+
+/* lisp open bracket */
+.opn {
+  color: #333333;
+}
+
+/* lisp close bracket */
+.clo {
+  color: #333333;
+}
+
+/* a markup tag name */
+.tag {
+  color: #367ac3;
+}
+
+/* a markup attribute name */
+.atn {
+  color: #51a7c9;
+}
+
+/* a markup attribute value */
+.atv {
+  color: #709c1a;
+}
+
+/* a declaration */
+.dec {
+  color: #666;
+}
+
+/* a variable name */
+.var {
+  color: teal;
+}
+
+/* a function name */
+.fun {
+  color: #990000;
+}
+.linenums ol li {
+    list-style-type: none;
+    counter-increment: list;
+    position: relative;
+}
+
+.linenums ol li:after {
+    content: counter(list);
+    position: absolute;
+    left: -3.3em;
+    border-right: 1px solid #e5e5e5;
+    padding-right: 9px;
+    width: 2.45em;
+    text-align: right;
+    color: rgba(0, 0, 0, .3);
+    font-size: 12px;
+}

package/src/scss/components/_print.scss

@@ -0,0 +1,74 @@
+@use "variables";
+
+@media print {
+
+  * {
+    text-shadow: none !important;
+    color: #000 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    font-size: variables.$font-size-print;
+  }
+
+  .h1,
+  h1 {
+    font-size: variables.$font-size-h1-print;
+  }
+  .h2,
+  h2 {
+    font-size: variables.$font-size-h2-print;
+  }
+  .h3,
+  h3 {
+    font-size: variables.$font-size-h3-print;
+  }
+  .h4,
+  h4 {
+    font-size: variables.$font-size-h4-print;
+  }
+  .h5,
+  h5 {
+    font-size: variables.$font-size-h5-print;
+  }
+  .h6,
+  h6 {
+    font-size: variables.$font-size-h6-print;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]:after
+  {
+    content: " (" attr(title) ")";
+  }
+
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: "";
+  }
+
+  pre,
+  blockquote {
+    page-break-inside: avoid;
+  }
+
+  blockquote {
+    border: none;
+    font-style: italic;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  select {
+    background: #fff !important;
+  }
+}

package/src/scss/components/_progress.scss

@@ -0,0 +1,32 @@
+/* =Progress
+-----------------------------------------------------------------------------*/
+#tools-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000000;
+  height: 10px;
+  & span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: $color-blue-dark;
+    @include striped();
+    @include animation(progress-bar-stripes 2s linear infinite);
+    background-size: 40px 40px;
+  }
+}
+
+@-webkit-keyframes progress-bar-stripes {
+  from { background-position: 40px 0; }
+  to { background-position: 0 0; }
+}
+@-o-keyframes progress-bar-stripes {
+  from { background-position: 40px 0; }
+  to { background-position: 0 0; }
+}
+@keyframes progress-bar-stripes {
+  from { background-position: 40px 0; }
+  to { background-position: 0 0; }
+}

package/src/scss/components/_reset.scss

@@ -0,0 +1,365 @@
+@use "mixins";
+
+/* =Reset
+-----------------------------------------------------------------------------*/
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--ply-font-body, sans-serif);
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  @include mixins.square;
+}
+
+html,
+body,
+div,
+span,
+object,
+iframe,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* Visible focus for keyboard navigation */
+a:focus-visible,
+button:focus-visible,
+summary:focus-visible,
+[tabindex]:focus-visible {
+    outline: 2px solid var(--ply-color-focus, #0f62fe);
+    outline-offset: 2px;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+embed,
+object,
+iframe,
+audio,
+video,
+canvas,
+progress,
+meter,
+output,
+textarea {
+  display: block;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/* To prevent some browsers from inserting quotes on q and p */
+blockquote,
+q {
+  quotes: none;
+}
+blockquote p:before,
+blockquote p:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+/* Table reset */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th,
+td {
+  text-align: left;
+  vertical-align: top;
+}
+thead th,
+thead td {
+  font-weight: bold;
+  vertical-align: bottom;
+}
+
+/* Image inside */
+a img,
+th img,
+td img {
+  vertical-align: top;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+/* Normalize buttons in IE */
+button {
+  width: auto;
+  overflow: visible;
+}
+
+/* Hand cursor on clickable controls */
+input[type="reset"],
+input[type="submit"],
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"],
+select,
+button {
+  cursor: pointer;
+}
+
+
+/* Trick with vertical align for radio and checkbox  */
+input[type="radio"],
+input[type="checkbox"] {
+  font-size: 110%;
+  position: relative;
+  top: -1px;
+  margin-right: 3px;
+}
+
+/* Normalize search fields */
+input[type="search"] {
+  appearance: textfield;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+/* Normalize horizontal line */
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid var(--ply-border-color, #ddd);
+}
+
+/* Responsive media */
+img,
+video,
+audio,
+embed,
+object {
+  max-width: 100%;
+}
+img,
+video,
+embed,
+object {
+  height: auto;
+}
+embed,
+object {
+    height: 100%;
+}
+img {
+  vertical-align: middle;
+}
+
+/* Native <details>/<summary> — Swiss/Modernist accordion */
+details {
+  border: 1px solid var(--ply-border-color, #e0e0e0);
+  border-radius: 0.25rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1.5rem;
+}
+
+summary {
+  cursor: pointer;
+  font-weight: 600;
+  padding: 0.25rem 0;
+  list-style: none;
+
+  &::marker,
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::before {
+    content: '\25B6';
+    display: inline-block;
+    margin-right: 0.5rem;
+    font-size: 0.75em;
+    transition: transform 0.15s ease;
+  }
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+details[open] > summary {
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid var(--ply-border-color, #e0e0e0);
+  padding-bottom: 0.75rem;
+}
+
+/* Native <dialog> — modal styling */
+dialog {
+  border: none;
+  border-radius: 0.25rem;
+  padding: 1.5rem;
+  max-width: 32rem;
+  width: 90%;
+  box-shadow: var(--ply-shadow-3, 0 4px 24px rgba(0, 0, 0, 0.15));
+  background: var(--ply-bg-surface, #ffffff);
+  color: var(--ply-color-body, #161616);
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* Native <progress> and <meter> */
+progress {
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: var(--ply-bg-muted, #e0e0e0);
+  margin-bottom: 1.5rem;
+
+  &::-webkit-progress-bar {
+    background: var(--ply-bg-muted, #e0e0e0);
+    border-radius: 0.25rem;
+  }
+
+  &::-webkit-progress-value {
+    background: var(--ply-color-link, #0f62fe);
+    border-radius: 0.25rem;
+  }
+
+  &::-moz-progress-bar {
+    background: var(--ply-color-link, #0f62fe);
+    border-radius: 0.25rem;
+  }
+}
+
+meter {
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: var(--ply-bg-muted, #e0e0e0);
+  margin-bottom: 1.5rem;
+}
+
+/* Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}