ply-css 1.3.0

package/src/scss/components/_helpers.scss

@@ -0,0 +1,466 @@
+@use 'helpers-core';
+@use "colors";
+@use "media-queries";
+@use "mixins";
+@use "variables";
+
+/* =Helpers (Extended)
+-----------------------------------------------------------------------------*/
+
+// Display (extended)
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.display-table {
+  display: table;
+}
+
+.display-inline-table {
+  display: inline-table;
+}
+
+.display-table-cell {
+  display: table-cell;
+}
+
+.display-list-item {
+  display: list-item;
+}
+
+.display-inline-grid {
+  display: inline-grid;
+}
+
+.display-subgrid {
+  display: subgrid;
+}
+
+// Flex alignment
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+// Spacing (extended — directional extras + auto)
+
+.margin-right-extra {
+  margin-right: var(--ply-space-lg, 1.5rem);
+}
+
+.margin-left-auto {
+  margin-left: auto;
+}
+
+.margin-left-extra {
+  margin-left: var(--ply-space-lg, 1.5rem);
+}
+
+// Directional margin scale
+.margin-top-xs    { margin-top: var(--ply-space-xs, 0.25rem); }
+.margin-top-sm    { margin-top: var(--ply-space-sm, 0.5rem); }
+.margin-top-lg    { margin-top: var(--ply-space-lg, 1.5rem); }
+.margin-top-xl    { margin-top: var(--ply-space-xl, 2rem); }
+.margin-top-xxl   { margin-top: var(--ply-space-xxl, 3rem); }
+
+.margin-right-xs  { margin-right: var(--ply-space-xs, 0.25rem); }
+.margin-right-sm  { margin-right: var(--ply-space-sm, 0.5rem); }
+.margin-right-lg  { margin-right: var(--ply-space-lg, 1.5rem); }
+.margin-right-xl  { margin-right: var(--ply-space-xl, 2rem); }
+.margin-right-xxl { margin-right: var(--ply-space-xxl, 3rem); }
+
+.margin-bottom-xs  { margin-bottom: var(--ply-space-xs, 0.25rem); }
+.margin-bottom-sm  { margin-bottom: var(--ply-space-sm, 0.5rem); }
+.margin-bottom-lg  { margin-bottom: var(--ply-space-lg, 1.5rem); }
+.margin-bottom-xl  { margin-bottom: var(--ply-space-xl, 2rem); }
+.margin-bottom-xxl { margin-bottom: var(--ply-space-xxl, 3rem); }
+
+.margin-left-xs   { margin-left: var(--ply-space-xs, 0.25rem); }
+.margin-left-sm   { margin-left: var(--ply-space-sm, 0.5rem); }
+.margin-left-lg   { margin-left: var(--ply-space-lg, 1.5rem); }
+.margin-left-xl   { margin-left: var(--ply-space-xl, 2rem); }
+.margin-left-xxl  { margin-left: var(--ply-space-xxl, 3rem); }
+
+.no-right-margin {
+  margin-right: 0 !important;
+}
+
+.no-left-margin {
+  margin-left: 0 !important;
+}
+
+.no-top-padding {
+  padding-top: 0 !important;
+}
+
+.no-right-padding {
+  padding-right: 0 !important;
+}
+
+.no-bottom-padding {
+  padding-bottom: 0 !important;
+}
+
+.no-left-padding {
+  padding-left: 0 !important;
+}
+
+// Padding (extended — directional extras)
+
+.padding-top-extra {
+  padding-top: var(--ply-space-lg, 1.5rem);
+}
+
+.padding-right-extra {
+  padding-right: var(--ply-space-lg, 1.5rem);
+}
+
+.padding-bottom-extra {
+  padding-bottom: var(--ply-space-lg, 1.5rem);
+}
+
+.padding-left-extra {
+  padding-left: var(--ply-space-lg, 1.5rem);
+}
+
+// Directional padding scale
+.padding-top-xs    { padding-top: var(--ply-space-xs, 0.25rem); }
+.padding-top-sm    { padding-top: var(--ply-space-sm, 0.5rem); }
+.padding-top-lg    { padding-top: var(--ply-space-lg, 1.5rem); }
+.padding-top-xl    { padding-top: var(--ply-space-xl, 2rem); }
+.padding-top-xxl   { padding-top: var(--ply-space-xxl, 3rem); }
+
+.padding-right-xs  { padding-right: var(--ply-space-xs, 0.25rem); }
+.padding-right-sm  { padding-right: var(--ply-space-sm, 0.5rem); }
+.padding-right-lg  { padding-right: var(--ply-space-lg, 1.5rem); }
+.padding-right-xl  { padding-right: var(--ply-space-xl, 2rem); }
+.padding-right-xxl { padding-right: var(--ply-space-xxl, 3rem); }
+
+.padding-bottom-xs { padding-bottom: var(--ply-space-xs, 0.25rem); }
+.padding-bottom-sm { padding-bottom: var(--ply-space-sm, 0.5rem); }
+.padding-bottom-lg { padding-bottom: var(--ply-space-lg, 1.5rem); }
+.padding-bottom-xl { padding-bottom: var(--ply-space-xl, 2rem); }
+.padding-bottom-xxl{ padding-bottom: var(--ply-space-xxl, 3rem); }
+
+.padding-left-xs   { padding-left: var(--ply-space-xs, 0.25rem); }
+.padding-left-sm   { padding-left: var(--ply-space-sm, 0.5rem); }
+.padding-left-lg   { padding-left: var(--ply-space-lg, 1.5rem); }
+.padding-left-xl   { padding-left: var(--ply-space-xl, 2rem); }
+.padding-left-xxl  { padding-left: var(--ply-space-xxl, 3rem); }
+
+// Borders (extended)
+
+.border-right {
+  border-right: 1px solid var(--ply-border-color, colors.$border-color);
+}
+
+.border-left {
+  border-left: 1px solid var(--ply-border-color, colors.$border-color);
+}
+
+.border-top-thick {
+  border-top: 3px solid var(--ply-border-color, colors.$border-color);
+}
+
+.border-right-thick {
+  border-right: 3px solid var(--ply-border-color, colors.$border-color);
+}
+
+.border-bottom-thick {
+  border-bottom: 3px solid var(--ply-border-color, colors.$border-color);
+}
+
+.border-left-thick {
+  border-left: 3px solid var(--ply-border-color, colors.$border-color);
+}
+
+.border-thick {
+  border: 3px solid var(--ply-border-color, colors.$border-color);
+}
+
+.no-border-top {
+  border-top: 0 none !important;
+}
+
+.no-border-right {
+  border-right: 0 none !important;
+}
+
+.no-border-bottom {
+  border-bottom: 0 none !important;
+}
+
+.no-border-left {
+  border-left: 0 none !important;
+}
+
+// Responsive width variants
+
+$width-breakpoints: (
+  "small-desktop": media-queries.$breakpoint-small-desktop,
+  "tablet": media-queries.$breakpoint-tablet,
+  "large-phone": media-queries.$breakpoint-large-phone,
+  "phone": media-queries.$breakpoint-phone,
+);
+
+@each $bp-name, $bp-value in $width-breakpoints {
+  @media (max-width: $bp-value) {
+    @each $name, $value in variables.$width-scale {
+      .#{$bp-name}-width-#{$name} { width: $value; }
+    }
+  }
+}
+
+@each $name, $value in variables.$width-scale {
+  .height-#{$name} { height: $value; }
+}
+
+// UI Helpers (extended)
+
+.border-box {
+  box-sizing: border-box;
+}
+
+// Skip link — visible only on focus for keyboard navigation
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  z-index: 1000;
+  padding: 0.75rem 1.5rem;
+  background: var(--ply-bg-body);
+  color: var(--ply-color-link);
+  text-decoration: underline;
+  font-weight: 600;
+
+  &:focus {
+    top: 0;
+  }
+}
+
+.circle {
+  border-radius: 100%;
+}
+
+.border-radius-lg {
+  border-radius: 0.75rem;
+}
+
+.border-radius-xl {
+  border-radius: 1.5rem;
+}
+
+// Text color helpers (theme-compatible)
+.text-primary {
+  color: var(--ply-color-body);
+}
+
+.text-secondary {
+  color: var(--ply-color-secondary);
+}
+
+.text-tertiary,
+.text-muted {
+  color: var(--ply-color-muted);
+}
+
+.text-inverse {
+  color: var(--ply-color-text-inverse);
+}
+
+.text-on-color {
+  color: #fff;
+}
+
+.no-orphan {
+  text-wrap: pretty;
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+// Transparent background overlay (theme-aware)
+.bg-glass {
+  background: var(--ply-bg-glass, rgba(255, 255, 255, 0.15));
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+// Accent color utilities (theme-aware)
+.color-accent { color: var(--ply-color-accent); }
+.bg-accent    { background-color: var(--ply-color-accent); }
+
+// Background color utilities (theme-aware, WCAG AA vs body text)
+.bg-blue   { background-color: var(--ply-bg-blue); }
+.bg-red    { background-color: var(--ply-bg-red); }
+.bg-green  { background-color: var(--ply-bg-green); }
+.bg-yellow { background-color: var(--ply-bg-yellow); }
+
+// Gap utilities
+.gap-xs  { gap: var(--ply-space-xs, 0.25rem); }
+.gap-sm  { gap: var(--ply-space-sm, 0.5rem); }
+.gap     { gap: var(--ply-space-md, 0.75rem); }
+.gap-lg  { gap: var(--ply-space-lg, 1.5rem); }
+.gap-xl  { gap: var(--ply-space-xl, 2rem); }
+.gap-xxl { gap: var(--ply-space-xxl, 3rem); }
+
+// Link reset — suppress link styling inside a container
+.no-link-style {
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+.spinning {
+  @include mixins.spinning(.75s);
+
+  display: inline-block;
+}
+
+.fade-in {
+  @include mixins.fadeIn;
+}
+
+.code {
+  border: 1px solid colors.$color-gray-light;
+  border-radius: variables.$border-radius;
+  display: inline-block;
+  font-size: .8rem;
+  font-family: variables.$font-family-code;
+  padding: .05rem .35rem;
+}
+
+// Typography (extended)
+
+.big {
+  font-size: variables.$font-size-big;
+}
+
+.small {
+  font-size: variables.$font-size-small;
+}
+
+.smaller {
+  font-size: variables.$font-size-smaller;
+}
+
+.highlight {
+  background-color: colors.$color-yellow-pastel;
+}
+
+.sans {
+  font-family: variables.$font-family-base;
+}
+
+.serif {
+  font-family: variables.$font-family-serif;
+}
+
+.mono {
+  font-family: variables.$font-family-mono;
+}
+
+.hide-text {
+  text-indent: -5000px;
+  font-size: 0;
+}
+
+.normal {
+  font-weight: normal;
+}
+
+.light {
+  font-weight: 300 !important;
+}
+
+.medium {
+  font-weight: 400 !important;
+}
+
+// Layer / Elevation Helpers
+
+.layer-0 {
+  background-color: var(--ply-layer-0);
+}
+
+.layer-1 {
+  background-color: var(--ply-layer-1);
+  box-shadow: var(--ply-shadow-1);
+}
+
+.layer-2 {
+  background-color: var(--ply-layer-2);
+  box-shadow: var(--ply-shadow-2);
+}
+
+.layer-3 {
+  background-color: var(--ply-layer-3);
+  box-shadow: var(--ply-shadow-3);
+}
+
+.shadow-1 {
+  box-shadow: var(--ply-shadow-1);
+}
+
+.shadow-2 {
+  box-shadow: var(--ply-shadow-2);
+}
+
+.shadow-3 {
+  box-shadow: var(--ply-shadow-3);
+}
+
+// Opacity scales
+
+$opacity-scale: (10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9);
+
+@each $name, $value in $opacity-scale {
+  .color-gray-#{$name}  { color: rgba(0, 0, 0, $value); }
+  .color-white-#{$name} { color: rgba(255, 255, 255, $value); }
+}
+
+// Brand text colors (theme-aware)
+.color-blue   { color: var(--ply-blue-1); }
+.color-red    { color: var(--ply-red-1); }
+.color-green  { color: var(--ply-green-1); }
+.color-yellow { color: var(--ply-yellow-1); }

package/src/scss/components/_labels.scss

@@ -0,0 +1,105 @@
+@use "colors";
+@use "variables";
+
+/* =Labels
+-----------------------------------------------------------------------------*/
+.label,
+.badge {
+  background: var(--ply-bg-muted, colors.$color-gray);
+  font-size: variables.$font-size-small;
+  display: inline-block;
+  line-height: 1;
+  padding: 4px 7px 3px 7px;
+  color: var(--ply-color-body, colors.$color-black);
+  text-align: center;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+.label-outline {
+  background: none;
+  border: 1px solid var(--ply-color-body, colors.$color-black);
+  padding: 3px 6px 2px 6px;
+}
+.badge {
+  border-radius: 15px;
+}
+.badge-small {
+  font-size: variables.$font-size-smaller;
+  padding: 3px 5px;
+}
+.label-black,
+.label-blue,
+.label-red,
+.label-green,
+.badge-black,
+.badge-blue,
+.badge-red,
+.badge-green {
+  color: colors.$color-white;
+}
+.label-black,
+.badge-black {
+  background: colors.$color-black;
+}
+.label-blue,
+.badge-blue {
+  background: colors.$color-blue;
+}
+.label-red,
+.badge-red {
+  background: colors.$color-red;
+}
+.label-green,
+.badge-green {
+  background: colors.$color-green;
+}
+.label-yellow,
+.badge-yellow {
+  background: colors.$color-yellow;
+}
+.label-white,
+.badge-white {
+  background: colors.$color-white;
+  color: var(--ply-color-text-inverse, #161616);
+}
+.label-black,
+.label-blue,
+.label-red,
+.label-green,
+.label-yellow,
+.label-white {
+  &.label-outline {
+    background: none;
+    color: var(--ply-color-body, colors.$color-black);
+  }
+}
+.label-blue {
+  &.label-outline {
+    border-color: colors.$color-blue;
+    color: colors.$color-blue;
+  }
+}
+.label-red {
+  &.label-outline {
+    border-color: colors.$color-red;
+    color: colors.$color-red;
+  }
+}
+.label-green {
+  &.label-outline {
+    border-color: colors.$color-green;
+    color: colors.$color-green;
+  }
+}
+.label-yellow {
+  &.label-outline {
+    border-color: colors.$color-yellow;
+    color: colors.$color-yellow;
+  }
+}
+.label-white {
+  &.label-outline {
+    border-color: colors.$color-white;
+    color: colors.$color-white;
+  }
+}