@razerspine/pug-ui-kit 1.0.1 → 1.1.0

package/less/utils/_mixins.less

@@ -0,0 +1,36 @@
+@import '../settings/_index';
+
+.breakpoint(@key) when (@key = sm) {
+  @bp: @breakpoint-sm;
+}
+
+.breakpoint(@key) when (@key = md) {
+  @bp: @breakpoint-md;
+}
+
+.breakpoint(@key) when (@key = lg) {
+  @bp: @breakpoint-lg;
+}
+
+.breakpoint(@key) when (@key = xl) {
+  @bp: @breakpoint-xl;
+}
+
+.breakpoint(@key) when not (@key = sm) and not (@key = md) and not (@key = lg) and not (@key = xl) {
+  @bp: 0;
+}
+
+/* respond-to: використання через вкладений блок .-inner-content() */
+.respond-to(@key) {
+  .breakpoint(@key);
+  .-with-bp() when not (@bp = 0) {
+    @media (min-width: @bp) {
+      .-inner-content();
+    }
+  }
+  .-without-bp() when (@bp = 0) {
+    .-inner-content();
+  }
+  .-with-bp();
+  .-without-bp();
+}

package/less/utils/_utilities.less

@@ -0,0 +1,400 @@
+@import '_helpers';
+
+// Space scale
+@space-0: 0rem;
+@space-1: 0.5rem;
+@space-2: 1rem;
+@space-3: 1.5rem;
+@space-4: 2rem;
+
+/* -------------------------
+   Helper: get-space(@s) -> @space-value
+   Usage: call .get-space(@s) then use @space-value
+   ------------------------- */
+.get-space(@s) when (@s = 0) {
+  @space-value: @space-0;
+}
+
+.get-space(@s) when (@s = 1) {
+  @space-value: @space-1;
+}
+
+.get-space(@s) when (@s = 2) {
+  @space-value: @space-2;
+}
+
+.get-space(@s) when (@s = 3) {
+  @space-value: @space-3;
+}
+
+.get-space(@s) when (@s = 4) {
+  @space-value: @space-4;
+}
+
+.get-space(@s) when not (@s = 0) and not (@s = 1) and not (@s = 2) and not (@s = 3) and not (@s = 4) {
+  // fallback
+  @space-value: 0rem;
+}
+
+/* -------------------------
+   Generate margin/padding utilities
+   Directions: "", t, r, b, l, x, y
+   x -> left & right
+   y -> top & bottom
+   ------------------------- */
+
+.generate-mp-scales(@s) when (@s >= 0) {
+  .get-space(@s);
+
+  /* margin */
+  .m-@{s} {
+    margin: @space-value;
+  }
+  .m-t-@{s} {
+    margin-top: @space-value;
+  }
+  .m-r-@{s} {
+    margin-right: @space-value;
+  }
+  .m-b-@{s} {
+    margin-bottom: @space-value;
+  }
+  .m-l-@{s} {
+    margin-left: @space-value;
+  }
+  .m-x-@{s} {
+    margin-left: @space-value;
+    margin-right: @space-value;
+  }
+  .m-y-@{s} {
+    margin-top: @space-value;
+    margin-bottom: @space-value;
+  }
+
+  /* padding */
+  .p-@{s} {
+    padding: @space-value;
+  }
+  .p-t-@{s} {
+    padding-top: @space-value;
+  }
+  .p-r-@{s} {
+    padding-right: @space-value;
+  }
+  .p-b-@{s} {
+    padding-bottom: @space-value;
+  }
+  .p-l-@{s} {
+    padding-left: @space-value;
+  }
+  .p-x-@{s} {
+    padding-left: @space-value;
+    padding-right: @space-value;
+  }
+  .p-y-@{s} {
+    padding-top: @space-value;
+    padding-bottom: @space-value;
+  }
+
+  .generate-mp-scales(@s - 1);
+}
+
+.generate-mp-scales(4); // generates 4..0
+
+/* -------------------------
+   DISPLAY utilities
+   ------------------------- */
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-inline {
+  display: inline;
+}
+
+.d-inline-block {
+  display: inline-block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.d-grid {
+  display: grid;
+}
+
+/* -------------------------
+   TEXT ALIGN
+   ------------------------- */
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+/* -------------------------
+   VISIBILITY
+   ------------------------- */
+.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.invisible {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* -------------------------
+   FLEX helpers
+   ------------------------- */
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* -------------------------
+   GRID helpers
+   ------------------------- */
+.grid {
+  display: grid;
+}
+
+.grid-center {
+  display: grid;
+  place-items: center;
+}
+
+/* -------------------------
+   WIDTH / HEIGHT utilities
+   ------------------------- */
+.w-100 {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+
+/* -------------------------
+   TEXT TRUNCATE
+   ------------------------- */
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* -------------------------
+   TITLES
+   ------------------------- */
+.title-h1 {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.title-h2 {
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+
+.title-h3 {
+  font-size: 1.375rem;
+  font-weight: 700;
+}
+
+.title-h4 {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.title-h5 {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.title-h6 {
+  font-size: .875rem;
+  font-weight: 700;
+}
+
+/* -------------------------
+   TEXT COLORS (CSS variables kept)
+   ------------------------- */
+.brand-50 {
+  color: var(--brand-50);
+}
+
+.brand-100 {
+  color: var(--brand-100);
+}
+
+.brand-500 {
+  color: var(--brand-500);
+}
+
+.brand-600 {
+  color: var(--brand-600);
+}
+
+.brand-700 {
+  color: var(--brand-700);
+}
+
+.slate-50 {
+  color: var(--slate-50);
+}
+
+.slate-100 {
+  color: var(--slate-100);
+}
+
+.slate-200 {
+  color: var(--slate-200);
+}
+
+.slate-300 {
+  color: var(--slate-300);
+}
+
+.slate-400 {
+  color: var(--slate-400);
+}
+
+.slate-500 {
+  color: var(--slate-500);
+}
+
+.slate-900 {
+  color: var(--slate-900);
+}
+
+.color-success {
+  color: var(--success);
+}
+
+.color-warning {
+  color: var(--warning);
+}
+
+.color-error {
+  color: var(--error);
+}
+
+.color-info {
+  color: var(--info);
+}
+
+/* -------------------------
+   BACKGROUND COLORS
+   ------------------------- */
+.bg-brand-50 {
+  background-color: var(--brand-50);
+}
+
+.bg-brand-100 {
+  background-color: var(--brand-100);
+}
+
+.bg-brand-500 {
+  background-color: var(--brand-500);
+}
+
+.bg-brand-600 {
+  background-color: var(--brand-600);
+}
+
+.bg-brand-700 {
+  background-color: var(--brand-700);
+}
+
+.bg-slate-50 {
+  background-color: var(--slate-50);
+}
+
+.bg-slate-100 {
+  background-color: var(--slate-100);
+}
+
+.bg-slate-200 {
+  background-color: var(--slate-200);
+}
+
+.bg-slate-300 {
+  background-color: var(--slate-300);
+}
+
+.bg-slate-400 {
+  background-color: var(--slate-400);
+}
+
+.bg-slate-500 {
+  background-color: var(--slate-500);
+}
+
+.bg-slate-900 {
+  background-color: var(--slate-900);
+}
+
+.bg-success {
+  background-color: var(--success);
+}
+
+.bg-warning {
+  background-color: var(--warning);
+}
+
+.bg-error {
+  background-color: var(--error);
+}
+
+.bg-info {
+  background-color: var(--info);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razerspine/pug-ui-kit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Shared Pug mixins for Webpack Starter templates",
   "keywords": [
     "pug",
@@ -10,11 +10,15 @@
   "main": "index.js",
   "files": [
     "mixins",
+    "scss",
+    "less",
     "index.js",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
   ],
+  "style": "scss/ui-kit.scss",
+  "less": "less/ui-kit.less",
   "author": "Razerspine",
   "repository": {
     "type": "git",

package/scss/base/_fonts.scss

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Thin.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Light.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Regular.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Medium.woff2') format('woff2'),
+  url('../../../fonts/Roboto-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../../../fonts/Roboto-Bold.woff2') format('woff2'),
+  url("../../../fonts/Roboto-Bold.woff") format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/scss/base/_index.scss

@@ -0,0 +1,2 @@
+@forward 'reset';
+@forward 'fonts';

package/scss/base/_reset.scss

@@ -0,0 +1,155 @@
+@use '../settings/index' as *;
+// Classic CSS reset adapted to SCSS
+// Based on Meyer reset + sensible defaults (box-sizing, media, form elements)
+
+/* Box sizing */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin/padding and set core defaults */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, 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 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+/* Base html/body */
+html {
+  line-height: 1.15; /* better default line-height */
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+}
+
+body {
+  width: 100%;
+  min-height: 100dvh;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Remove list styles */
+ol, ul {
+  list-style: none;
+}
+
+/* Remove default quotes */
+blockquote, q {
+  quotes: none;
+}
+
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: none;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Images and media */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Links */
+a {
+  background-color: transparent;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Forms: inputs, buttons, selects, textareas */
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-shadow: none;
+  resize: vertical;
+}
+
+/* Buttons and clickable elements */
+button, [type="button"], [type="submit"], [role="button"] {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+/* Remove inner focus border in Firefox */
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/* Fieldset and legend */
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+/* Accessibility helpers */
+[hidden] {
+  display: none !important;
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Utility: make images and media non-draggable by default */
+img, svg, video {
+  user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+}
+
+///* Optional: set base focus outline for keyboard users (can be customized) */
+//:focus {
+//  outline: 2px solid rgba(13, 110, 253, 0.6);
+//  outline-offset: 2px;
+//}

package/scss/components/_aside.scss

@@ -0,0 +1,47 @@
+@use '../settings/index' as *;
+
+.aside {
+  grid-area: aside;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 $gutter;
+  @media screen and (min-width: map-get($breakpoints, lg)) {
+    padding: 0;
+  }
+}
+
+.navigation {
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-outline);
+  border-radius: $border-radius;
+  padding: $gutter;
+  width: 100%;
+  @media screen and (min-width: map-get($breakpoints, lg)) {
+    padding: calc($gutter * 2);
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+
+  &__item {
+    width: 100%;
+
+    &:hover {
+      .list__link {
+        color: var(--brand-600);
+      }
+    }
+  }
+
+  &__link {
+    color: var(--text-primary);
+    display: block;
+    width: 100%;
+    padding: .375rem .625rem;
+  }
+}