@kubex/zinc 0.0.2 → 1.0.0

package/scss/_root.scss

@@ -0,0 +1,202 @@
+@use "sass:map";
+@use "sass:color";
+@use "sass:meta";
+@use "variables";
+
+:root {
+  // Brand Colors
+  --zn-red: 237, 84, 109;
+  --zn-blue: 100, 131, 242;
+  --zn-green: 41, 186, 181;
+  --zn-orange: 255, 136, 0;
+  --zn-yellow: 255, 193, 7;
+  --zn-indigo: 63, 81, 181;
+  --zn-violet: 156, 39, 176;
+  --zn-pink: 255, 108, 156;
+  --zn-grey: 158, 158, 158;
+  --zn-primary: 104, 54, 245;
+  --zn-accent: 71, 214, 214;
+
+  // Theme Colors
+  --zn-color-info: 100, 131, 242;
+  --zn-color-warning: 255, 136, 0;
+  --zn-color-error: 237, 84, 109;
+  --zn-color-success: 41, 186, 181;
+  --zn-color-disabled: 181, 181, 181;
+
+  // Common Sizes
+  --zn-size-bar: 60px;
+  --zn-size-tile: 80px;
+  --zn-size-sidenav: 320px;
+  --zn-size-spanel: 170px;
+  --zn-size-mpanel: 320px;
+  --zn-size-panel: 360px;
+  --zn-size-lside: 460px;
+
+  // Font Families
+  --zn-font-family-sans: 'Inter', sans-serif;
+  --zn-font-family-serif: 'Roboto Slab', serif;
+  --zn-font-family-mono: 'Roboto Mono', monospace;
+
+  // Default Opacities
+  --zn-bg-opacity: 1;
+  --zn-text-opacity: 1;
+
+  --base: 255, 255, 255;
+  --inverse-base: 0, 0, 0;
+}
+
+.zn-mono {
+  font-family: var(--zn-font-family-mono);
+}
+
+[t="light"], .theme-light {
+  // Theme Light
+  --zn-panel-opacity: 1;
+  --zn-text: 123, 112, 151;
+  --zn-text-heading: 56, 39, 104;
+  --zn-text-page-title: 52, 52, 52;
+  --zn-text-panel-title: 56, 39, 104;
+  --zn-body: 248, 247, 251;
+  --zn-shadow: 236, 233, 241;
+  --zn-panel: 255, 255, 255;
+  --zn-panel-secondary: 246 246 246;
+  --zn-panel-highlight: 248, 249, 252;
+  --zn-panel-highlight-opacity: 1;
+  --zn-border-color: 224, 221, 233;
+  --zn-input-bg: 248, 247, 251;
+  --zn-input-bg-accent: 237, 235, 245;
+  --zn-bright-bg: 255, 255, 255;
+  --zn-light-text: 123, 112, 151;
+  --zn-dark-text: 56, 39, 104;
+  --zn-purple-text: 104, 54, 245;
+
+  .zn-primary {
+    color: #6836F5;
+  }
+}
+
+[t="dark"], .theme-dark {
+  // Theme Dark
+  --zn-body: 20, 22, 27;
+  --zn-panel: 33, 34, 41;
+  --zn-shadow: 10, 10, 10;
+  --zn-panel-secondary: 27, 27, 30;
+  --zn-panel-opacity: 1;
+  --zn-text: 149, 163, 184;
+  --zn-text-heading: 241, 245, 249;
+  --zn-text-page-title: 225, 225, 225;
+  --zn-text-panel-title: 181, 158, 255;
+  --zn-panel-highlight: 255, 255, 255;
+  --zn-panel-highlight-opacity: 0.1;
+  --zn-border-color: 50, 50, 60;
+  --zn-input-bg: 28, 28, 32;
+  --zn-input-bg-accent: 72, 84, 102;
+  --zn-bright-bg: 225, 225, 225;
+  --zn-light-text: 173, 163, 192;
+  --zn-dark-text: 201, 201, 201;
+  --zn-purple-text: 129, 140, 249;
+  --zn-accent: 15, 165, 234;
+
+  // Theme Dark Brand Colours
+  --zn-primary: 137, 103, 239;
+
+  --base: 0, 0, 0;
+  --inverse-base: 255, 255, 255;
+
+  .zn-primary {
+    color: #8967ef !important;
+  }
+}
+
+@each $spacing-key, $spacing-value in variables.$spacing {
+  .ml-#{$spacing-key} {
+    margin-left: $spacing-value;
+  }
+
+  .mr-#{$spacing-key} {
+    margin-right: $spacing-value;
+  }
+
+  .mt-#{$spacing-key} {
+    margin-top: $spacing-value;
+  }
+
+  .mb-#{$spacing-key} {
+    margin-bottom: $spacing-value;
+  }
+
+  .mx-#{$spacing-key} {
+    margin-left: $spacing-value;
+    margin-right: $spacing-value;
+  }
+
+  .my-#{$spacing-key} {
+    margin-top: $spacing-value;
+    margin-bottom: $spacing-value;
+  }
+
+  .m-#{$spacing-key} {
+    margin: $spacing-value;
+  }
+}
+
+.zn-red {
+  color: rgb(var(--zn-red));
+}
+
+.zn-blue {
+  color: rgb(var(--zn-blue));
+}
+
+.zn-green {
+  color: rgb(var(--zn-green));
+}
+
+.zn-orange {
+  color: rgb(var(--zn-orange));
+}
+
+.zn-yellow {
+  color: rgb(var(--zn-yellow));
+}
+
+.zn-indigo {
+  color: rgb(var(--zn-indigo));
+}
+
+.zn-violet {
+  color: rgb(var(--zn-violet));
+}
+
+.zn-pink {
+  color: rgb(var(--zn-pink));
+}
+
+.zn-grey {
+  color: rgb(var(--zn-grey));
+}
+
+.zn-primary {
+  color: rgb(var(--zn-primary));
+}
+
+.zn-accent {
+  color: rgb(var(--zn-accent));
+}
+
+.zn-info {
+  color: rgb(var(--zn-color-info));
+}
+
+.zn-warning {
+  color: rgb(var(--zn-color-warning));
+}
+
+.zn-error {
+  color: rgb(var(--zn-color-error));
+}
+
+.zn-success {
+  color: rgb(var(--zn-color-success));
+}

package/scss/boot.scss

@@ -0,0 +1,29 @@
+//@use "./shared";
+//@use "./global-components";
+
+@use "./themes";
+@use "./global-spacing";
+// Get rid of root as soon as. and use theme variables instead
+@use "./root";
+
+// Needed components for positioning
+@use "./shared";
+
+// External components
+@use "../node_modules/air-datepicker/air-datepicker.css";
+
+.air-datepicker {
+  --adp-day-name-color: var(--zn-color-primary-600);
+  --adp-day-name-color-hover: var(--zn-color-primary-700);
+  --adp-cell-background-color-selected: var(--zn-color-primary-600);
+  --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
+  --adp-color-current-date: var(--zn-color-primary-600);
+
+  --adp-background-color-selected-other-month: var(--zn-color-primary-300);
+  --adp-background-color-in-range: var(--zn-color-primary-100);
+
+  --adp-cell-background-color-in-range: var(--zn-color-primary-100);
+  --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
+
+  z-index: 1000000; // Needs to display over modals
+}

package/scss/mixins/_helper-mixins.scss

@@ -0,0 +1,24 @@
+@use "./spacing-mixins";
+
+@mixin scrollbars {
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--inverse-base), 0.2);
+    border-radius: 5px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--inverse-base), 0.6);
+  }
+}

package/scss/mixins/_spacing-mixins.scss

@@ -0,0 +1,84 @@
+@use "sass:map";
+@use "../variables/spacing";
+
+@mixin media-query($min, $max: null) {
+  @if $min and $max {
+    @media (min-width: #{map.get(spacing.$container, $min)}) and (max-width: #{map.get(spacing.$container, $max)-1}) {
+      @content;
+    }
+  } @else if $min {
+    @media (min-width: #{map.get(spacing.$container, $min)}) {
+      @content;
+    }
+  } @else if $max {
+    @media (max-width: #{map.get(spacing.$container, $max)-1}) {
+      @content;
+    }
+  }
+}
+
+@mixin container-query($min, $max: null) {
+  @if $min and $max {
+    @container (min-width: #{map.get(spacing.$container, $min)}) and (max-width: #{map.get(spacing.$container, $max)-1}) {
+      @content;
+    }
+  } @else if $min {
+    @container (min-width: #{map.get(spacing.$container, $min)}) {
+      @content;
+    }
+  } @else if $max {
+    @container (max-width: #{map.get(spacing.$container, $max)-1}) {
+      @content;
+    }
+  }
+}
+
+@mixin gap {
+  gap: var(--zn-gap, 0);
+}
+
+@mixin gap-sm {
+  --zn-gap: var(--zn-spacing-small, 0);
+  gap: var(--zn-gap, 0);
+}
+
+@mixin padding {
+  padding: var(--zn-spacing-medium, 0);
+}
+
+@function spacing($size, $default: sm) {
+  @if map.has-key(spacing.$spacing, $size) {
+    @return map.get(spacing.$spacing, $size);
+  } @else {
+    @warn "Unknown spacing size `#{$size}`. Using default `#{$default}`.";
+    @return map.get(spacing.$spacing, $default);
+  }
+}
+
+@function reduce($size, $ratio) {
+  @return $size * $ratio;
+}
+
+@function common-size($size) {
+  @if map.has-key(spacing.$common-sizes, $size) {
+    @return map.get(spacing.$common-sizes, $size);
+  } @else {
+    @warn "Unknown common size `#{$size}`.";
+  }
+}
+
+@function container-width($size) {
+  @if map.has-key(spacing.$container, $size) {
+    @return map.get(spacing.$container, $size);
+  } @else {
+    @warn "Unknown container size `#{$size}`.";
+  }
+}
+
+
+@mixin page-content {
+  display: flex;
+  flex-direction: column;
+  align-items: normal;
+  @include gap;
+}

package/scss/mixins/index.scss

@@ -0,0 +1,2 @@
+@forward "spacing-mixins";
+@forward "helper-mixins";

package/scss/shared/_base.scss

@@ -0,0 +1,138 @@
+/**
+Apply default styles to the document, and shadow documents
+ */
+
+:host, html, body {
+  color: rgba(var(--zn-text), var(--zn-text-opacity));
+  font-family: var(--zn-font-family-sans);
+
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 14px;
+  line-height: 1.5;
+
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+  -moz-tab-size: 4;
+  tab-size: 4;
+  margin: 0;
+}
+
+html, body {
+  background-color: rgba(var(--zn-body), var(--zn-bg-opacity));
+  container-type: size;
+  min-height: 100%;
+  height: 100%;
+}
+
+.inline-container {
+  container-type: inline-size;
+}
+
+.app-container {
+  container-type: inline-size;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  position: relative;
+  max-height: 100%;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+}
+
+.inline-app-container, .app-container.inline-app-container, [inline-container] .app-container {
+  display: block;
+  height: auto;
+  flex: unset;
+}
+
+
+hr {
+  height: 0;
+  border: none;
+  border-top: 1px solid rgb(var(--zn-border-color));
+}
+
+code, kbd, samp, pre, .mono {
+  font-family: var(--zn-font-family-mono);
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+.hidden {
+  display: none;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--zn-font-weight-medium);
+  color: rgb(var(--zn-text-heading));
+}
+
+h6 {
+  font-size: var(--zn-font-size-x-small);
+}
+
+h5 {
+  font-size: var(--zn-font-size-small);
+}
+
+h4 {
+  font-size: var(--zn-font-size-medium);
+}
+
+h3 {
+  font-size: var(--zn-font-size-large);
+}
+
+h2 {
+  font-size: var(--zn-font-size-x-large);
+}
+
+h1 {
+  font-size: var(--zn-font-size-2x-large);
+}
+
+kbd {
+  font-family: monospace;
+
+  background-color: #eee;
+  color: #333;
+
+  border: 1px solid rgb(var(--zn-border-color));
+
+  border-radius: 3px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 0 rgba(255, 255, 255, .5) inset;
+  display: inline-block;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 1px 6px;
+  white-space: nowrap;
+  min-width: 15px;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+[t="dark"] kbd {
+  background-color: rgb(25, 25, 25);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 0 rgba(110, 110, 110, .5) inset;
+  color: #eee;
+}
+
+[tab] {
+  cursor: pointer;
+}
+
+.zn-link:hover {
+  --zn-text: rgb(var(--zn-primary));
+  --icon-color: rgb(var(--zn-primary));
+  --zn-text-heading: rgb(var(--zn-primary));
+  --property-color: rgb(var(--zn-primary));
+  opacity: 1;
+}

package/scss/shared/_button.scss

@@ -0,0 +1,27 @@
+@use '../mixins';
+@use '../variables';
+
+@mixin button {
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 15px;
+  margin: auto;
+  width: fit-content;
+  background-color: rgb(var(--zn-primary));
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 600;
+  cursor: pointer;
+  vertical-align: middle;
+  border-color: transparent;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: rgba(var(--zn-primary), 0.8);
+  }
+}
+
+button, .zn-button {
+  @include button;
+}

package/scss/shared/_form-elements.scss

@@ -0,0 +1,162 @@
+@use "sass:map";
+@use '../mixins';
+@use '../variables';
+@use "./button";
+
+input[type=date],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+input[type=week],
+input[type=file],
+input[list],
+textarea,
+select {
+  display: block;
+  width: 100%;
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 1px !important;
+  border-color: rgb(var(--zn-border-color));
+  background-color: rgb(var(--zn-input-bg));
+  outline: none;
+
+  &:focus {
+    border-color: rgb(var(--zn-primary));
+    box-shadow: 0 0 0 3px rgba(var(--zn-primary), 0.3);
+  }
+
+  &::placeholder {
+    font-weight: 400;
+    color: rgba(var(--zn-text), .6);
+  }
+
+  @include mixins.media-query(sm) {
+    padding: mixins.spacing(sm);
+  }
+}
+
+label {
+  font-weight: 600;
+  font-size: rgb(var(--zn-font-size-medium));
+  color: rgb(var(--zn-text-heading));
+  display: block;
+  margin-bottom: mixins.spacing(xs);
+  margin-top: mixins.spacing(md);
+}
+
+input[type=checkbox], input[type=radio] {
+  border-radius: 5px;
+}
+
+input[type=radio] {
+  border-radius: 50%;
+}
+
+input[type=range] {
+  appearance: none;
+  border-radius: 10px;
+  background-color: rgb(var(--zn-border-color));
+  height: mixins.spacing(sm);
+  accent-color: rgb(var(--zn-primary));
+  width: 100%;
+  max-width: mixins.container-width(md);
+}
+
+fieldset {
+  border-color: rgba(var(--zn-primary), 20%);
+  border-width: 2px;
+  padding: 0 mixins.spacing(md) mixins.spacing(md);
+}
+
+select {
+
+  option {
+    padding: mixins.spacing(xs);
+  }
+
+  > option:checked {
+    background-color: rgba(var(--zn-primary), 20%);
+    border-radius: 5px;
+  }
+}
+
+fieldset > legend {
+  padding: mixins.spacing(xs);
+}
+
+input[type=button],
+input[type=submit],
+button[type=submit]:not(.button),
+button[type=button]:not(.button) {
+  @include button.button;
+
+  & {
+    width: auto;
+  }
+}
+
+div + button {
+  margin-top: mixins.spacing(md);
+}
+
+input[type=file]::-webkit-file-upload-button {
+  @include button.button;
+
+  margin-right: mixins.spacing(sm);
+}
+
+input::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  padding: mixins.spacing(sm);
+}
+
+input[list]::-webkit-calendar-picker-indicator {
+  padding: mixins.spacing(sm) mixins.spacing(xs)
+}
+
+.input--with-icon {
+  position: relative;
+
+  zn-icon {
+    padding: 14px;
+    position: absolute;
+    top: 50%;
+    pointer-events: none;
+    transform: translateY(-50%);
+    left: mixins.spacing(sm);
+    background-color: rgb(var(--zn-primary));
+    color: rgb(var(--zn-text));
+    border-radius: 50%;
+  }
+
+  input {
+    padding-left: 40px;
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: rgb(var(--zn-text));
+  transition: background-color 5000s ease-in-out 0s;
+  box-shadow: inset 0 0 20px 20px #23232329;
+}
+
+
+select {
+  height: 43px;
+}
+
+.no-border {
+  border: none !important;
+}

package/scss/shared/_opacity.scss

@@ -0,0 +1,27 @@
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-40 {
+  opacity: 0.4;
+}
+
+.opacity-10 {
+  opacity: 0.1;
+}