@razerspine/pug-ui-kit 1.0.1 → 1.2.0

package/scss/layout/_layout.scss

@@ -0,0 +1,49 @@
+@use '../settings/index' as *;
+
+.layout {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  display: grid;
+  grid-template-areas: 'header''aside''main''footer';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto 1fr auto;
+  width: 100%;
+  min-height: 100dvh;
+  gap: $gutter;
+  font-family: $font-family;
+  font-size: $base-font-size;
+  font-weight: 400;
+  line-height: 1.5;
+  @media screen and (min-width: map-get($breakpoints, lg)) {
+    grid-template-areas:
+      'header header header header'
+      'gutter-left aside main gutter-right'
+      'footer footer footer footer';
+    grid-template-columns: 1fr minmax($aside-min, calc(#{$available-width} * #{$aside-ratio} / #{$total-ratio})) minmax($main-min, calc(#{$available-width} * #{$main-ratio} / #{$total-ratio})) 1fr;
+    grid-template-rows: auto 1fr auto;
+    gap: calc($gutter * 2);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition-duration: 0ms;
+      animation-duration: 0ms;
+    }
+  }
+}
+
+.layout-simple {
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  display: grid;
+  grid:
+    "header" auto
+    "main" 1fr
+    "footer" auto
+    / 1fr;
+  width: 100%;
+  font-family: $font-family;
+  font-size: $base-font-size;
+  font-weight: 400;
+  line-height: 1.5;
+  gap: $gutter;
+}

package/scss/settings/_breakpoints.scss

@@ -0,0 +1,7 @@
+$breakpoints: (
+        xs: 0,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px
+);

package/scss/settings/_index.scss

@@ -0,0 +1,3 @@
+@forward 'variables';
+@forward 'breakpoints';
+@forward 'typography';

package/scss/settings/_typography.scss

@@ -0,0 +1,2 @@
+$font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+$base-font-size: 14px;

package/scss/settings/_variables.scss

@@ -0,0 +1,16 @@
+// layout
+$container-max: 1360px;
+$columns: 12;
+$gutter: 15px;
+$border-radius: .375rem;
+
+// layout settings
+$aside-ratio: 1;
+$main-ratio: 3;
+$aside-min: 300px;
+$main-min: 320px;
+$total-ratio: $aside-ratio + $main-ratio;
+$available-width: calc(#{$container-max} - #{calc(#{$gutter} * 2)}); // when layout have gap
+
+// font path
+$font-path: '~@razerspine/pug-ui-kit/fonts' !default;

package/scss/themes/_dark.scss

@@ -0,0 +1,25 @@
+html[data-theme="dark"] {
+  --bg-color: #020617;
+  --bg-surface: #0f172a;
+  --bg-subtle: #1e293b;
+
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-disabled: #475569;
+  --text-on-brand: #ffffff;
+
+  --success: #34d399;
+  --error: #f87171;
+
+  --border-subtle: #1e293b;
+  --border-strong: #334155;
+  --border-interactive: var(--brand-500);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --shadow-outline: 0 0 12px rgba(0, 0, 0, 0.5);
+
+  --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  --checkbox-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2.5-2.5a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}

package/scss/themes/_index.scss

@@ -0,0 +1,2 @@
+@forward 'light';
+@forward 'dark';

package/scss/themes/_light.scss

@@ -0,0 +1,49 @@
+:root {
+  --brand-50: #eff6ff;
+  --brand-100: #dbeafe;
+  --brand-200: #bfdbfe;
+  --brand-300: #93c5fd;
+  --brand-400: #60a5fa;
+  --brand-500: #3b82f6;
+  --brand-600: #2563eb;
+  --brand-700: #1d4ed8;
+  --brand-800: #1e40af;
+  --brand-900: #1e3a8a;
+
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #0ea5e9;
+
+  --bg-color: var(--slate-50);
+  --bg-surface: #ffffff;
+  --bg-subtle: var(--slate-100);
+
+  --text-primary: var(--slate-900);
+  --text-secondary: var(--slate-500);
+  --text-disabled: var(--slate-400);
+  --text-on-brand: #ffffff;
+
+  --border-subtle: var(--slate-200);
+  --border-strong: var(--slate-300);
+  --border-interactive: var(--brand-500);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-outline: 0 0 12px rgba(0, 0, 0, 0.1);
+
+  --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  --checkbox-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2.5-2.5a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}

package/scss/ui-kit.scss

@@ -0,0 +1,6 @@
+@use 'base/index' as *;
+@use 'settings/index' as *;
+@use 'themes/index' as *;
+@use 'layout/index' as *;
+@use 'components/index' as *;
+@use 'utils/index' as *;

package/scss/utils/_helpers.scss

@@ -0,0 +1,18 @@
+$space-scale: (
+        0: 0,
+        1: 4px,
+        2: 8px,
+        3: 12px,
+        4: 16px,
+        5: 24px,
+        6: 32px,
+        7: 48px
+);
+
+@function space($key) {
+  @return map-get($space-scale, $key);
+}
+
+@function suf($k) {
+  @return if(type-of($k) == 'number', $k, $k);
+}

package/scss/utils/_index.scss

@@ -0,0 +1,3 @@
+@forward 'helpers';
+@forward 'mixins';
+@forward 'utilities';

package/scss/utils/_mixins.scss

@@ -0,0 +1,16 @@
+@use '../settings/index' as *;
+
+@function breakpoint($key) {
+  @return map-get($breakpoints, $key);
+}
+
+@mixin respond-to($key) {
+  $bp: breakpoint($key);
+  @if $bp != null and $bp != 0 {
+    @media (min-width: $bp) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/scss/utils/_utilities.scss

@@ -0,0 +1,305 @@
+@use 'sass:math';
+@use 'helpers';
+
+// SPACING utilities: m- p- (margin/padding) with directions
+$space-map: (0: 0rem, 1: 0.5rem, 2: 1rem, 3: 1.5rem, 4: 2rem);
+$directions: ("" : "", t: "-top", r: "-right", b: "-bottom", l: "-left", x: ("-left", "-right"), y: ("-top", "-bottom"));
+$scales: 0 1 2 3 4;
+
+@function helpers-space($key) {
+  @if map-has-key($space-map, $key) {
+    @return map-get($space-map, $key);
+  } @else {
+    @warn "Unknown spacing key `#{$key}`. Returning 0rem.";
+    @return 0rem;
+  }
+}
+
+@each $d, $prop in $directions {
+  @each $s in $scales {
+    // Margin class
+    $m-class: if($d == "", ".m-#{$s}", ".m-#{$d}-#{$s}");
+    #{$m-class} {
+      @if $d == "" {
+        margin: helpers-space($s);
+      } @else if type-of($prop) == 'list' {
+        @each $p in $prop {
+          margin#{$p}: helpers-space($s);
+        }
+      } @else {
+        margin#{$prop}: helpers-space($s);
+      }
+    }
+
+    // Padding class
+    $p-class: if($d == "", ".p-#{$s}", ".p-#{$d}-#{$s}");
+    #{$p-class} {
+      @if $d == "" {
+        padding: helpers-space($s);
+      } @else if type-of($prop) == 'list' {
+        @each $p in $prop {
+          padding#{$p}: helpers-space($s);
+        }
+      } @else {
+        padding#{$prop}: helpers-space($s);
+      }
+    }
+  }
+}
+
+/* DISPLAY utilities */
+$display-map: (d-none: none, d-block: block, d-inline: inline, d-inline-block: inline-block, d-flex: flex, d-inline-flex: inline-flex, d-grid: grid);
+@each $class, $val in $display-map {
+  .#{$class} {
+    display: $val;
+  }
+}
+
+/* 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 (percent / auto) */
+.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 */
+.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);
+}