procode-vs-theme 1.0.5 → 1.0.7

package/dist/src/utilities/_sizing.scss

@@ -1,13 +1,24 @@
-$_sizing-values: (25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto);
+@use "../base/size" as sz;
+@use "../base/mixins/meta-class" as mc;
 
-@each $key, $value in $_sizing-values {
-  .qo-w-#{$key} { width: $value; }
-  .qo-h-#{$key} { height: $value; }
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-w-#{$key}", (width: $value));
+  @include mc.meta("qo-h-#{$key}", (height: $value));
 }
 
-.qo-mw-100 { max-width: 100%; }
-.qo-mh-100 { max-height: 100%; }
-.qo-min-vw-100 { min-width: 100vw; }
-.qo-min-vh-100 { min-height: 100vh; }
-.qo-vw-100 { width: 100vw; }
-.qo-vh-100 { height: 100vh; }
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-min-w-#{$key}", (min-width: $value));
+  @include mc.meta("qo-min-h-#{$key}", (min-height: $value));
+}
+
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-max-w-#{$key}", (max-width: $value));
+  @include mc.meta("qo-max-h-#{$key}", (max-height: $value));
+}
+
+@include mc.meta("qo-mw-100", (max-width: 100%));
+@include mc.meta("qo-mh-100", (max-height: 100%));
+@include mc.meta("qo-min-vw-100", (min-width: 100vw));
+@include mc.meta("qo-min-vh-100", (min-height: 100vh));
+@include mc.meta("qo-vw-100", (width: 100vw));
+@include mc.meta("qo-vh-100", (height: 100vh));

package/dist/src/utilities/_text.scss

@@ -1,49 +1,43 @@
 @use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
 
 // Text alignment
-.qo-text-start { text-align: left; }
-.qo-text-end { text-align: right; }
-.qo-text-center { text-align: center; }
-.qo-text-justify { text-align: justify; }
+@include mc.meta("qo-text-start", (text-align: left));
+@include mc.meta("qo-text-end", (text-align: right));
+@include mc.meta("qo-text-center", (text-align: center));
+@include mc.meta("qo-text-justify", (text-align: justify));
 
 // Text wrapping
-.qo-text-nowrap { white-space: nowrap; }
-.qo-text-wrap { white-space: normal; }
-.qo-text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.qo-text-break {
-  word-wrap: break-word;
-  word-break: break-word;
-}
+@include mc.meta("qo-text-nowrap", (white-space: nowrap));
+@include mc.meta("qo-text-wrap", (white-space: normal));
+@include mc.meta("qo-text-truncate", (overflow: hidden, text-overflow: ellipsis, white-space: nowrap));
+@include mc.meta("qo-text-break", (word-wrap: break-word, word-break: break-word));
 
 // Text transform
-.qo-text-uppercase { text-transform: uppercase; }
-.qo-text-lowercase { text-transform: lowercase; }
-.qo-text-capitalize { text-transform: capitalize; }
+@include mc.meta("qo-text-uppercase", (text-transform: uppercase));
+@include mc.meta("qo-text-lowercase", (text-transform: lowercase));
+@include mc.meta("qo-text-capitalize", (text-transform: capitalize));
 
 // Text decoration
-.qo-text-decoration-none { text-decoration: none; }
-.qo-text-decoration-underline { text-decoration: underline; }
-.qo-text-decoration-line-through { text-decoration: line-through; }
+@include mc.meta("qo-text-decoration-none", (text-decoration: none));
+@include mc.meta("qo-text-decoration-underline", (text-decoration: underline));
+@include mc.meta("qo-text-decoration-line-through", (text-decoration: line-through));
 
 // Font style
-.qo-fst-italic { font-style: italic; }
-.qo-fst-normal { font-style: normal; }
+@include mc.meta("qo-fst-italic", (font-style: italic));
+@include mc.meta("qo-fst-normal", (font-style: normal));
 
 // Line height
-.qo-lh-1 { line-height: 1; }
-.qo-lh-sm { line-height: 1.25; }
-.qo-lh-base { line-height: 1.5; }
-.qo-lh-lg { line-height: 2; }
+@include mc.meta("qo-lh-1", (line-height: 1));
+@include mc.meta("qo-lh-sm", (line-height: 1.25));
+@include mc.meta("qo-lh-base", (line-height: 1.5));
+@include mc.meta("qo-lh-lg", (line-height: 2));
 
 // Responsive text alignment
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: $bp-value) {
-    .qo-text-#{$bp-name}-start { text-align: left; }
-    .qo-text-#{$bp-name}-end { text-align: right; }
-    .qo-text-#{$bp-name}-center { text-align: center; }
+    @include mc.meta("qo-text-#{$bp-name}-start", (text-align: left));
+    @include mc.meta("qo-text-#{$bp-name}-end", (text-align: right));
+    @include mc.meta("qo-text-#{$bp-name}-center", (text-align: center));
   }
 }

package/dist/src/utilities/_visibility.scss

@@ -1,2 +1,4 @@
-.qo-visible { visibility: visible; }
-.qo-invisible { visibility: hidden; }
+@use "../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-visible", (visibility: visible));
+@include mc.meta("qo-invisible", (visibility: hidden));

package/dist/src/utilities/background-color/index.scss

@@ -1,37 +1,16 @@
-@use "../../base/color" as cl;
-.qo-bg-primary {
-  background-color: cl.$background-primary;
-}
-.qo-bg-secondary {
-  background-color: cl.$background-secondary;
-}
-.qo-bg-success {
-  background-color: cl.$background-success;
-}
-.qo-bg-warning {
-  background-color: cl.$background-warning;
-}
-.qo-bg-danger {
-  background-color: cl.$background-danger;
-}
-.qo-bg-info {
-  background-color: cl.$background-info;
-}
-.qo-bg-default {
-  background-color: cl.$background-default;
-}
-.qo-bg-dark {
-  background-color: cl.$background-dark;
-}
-.qo-bg-dark-alt {
-  background-color: cl.$background-dark-a;
-}
-.qo-bg-light {
-  background-color: cl.$background-light;
-}
-.qo-bg-tertiary {
-  background-color: cl.$background-tertiary;
-}
-.qo-bg-lime {
-  background-color: cl.$background-lime;
-}
+@use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-bg-primary", (background-color: cl.$background-primary));
+@include mc.meta("qo-bg-secondary", (background-color: cl.$background-secondary));
+@include mc.meta("qo-bg-success", (background-color: cl.$background-success));
+@include mc.meta("qo-bg-warning", (background-color: cl.$background-warning));
+@include mc.meta("qo-bg-danger", (background-color: cl.$background-danger));
+@include mc.meta("qo-bg-info", (background-color: cl.$background-info));
+@include mc.meta("qo-bg-default", (background-color: cl.$background-default));
+@include mc.meta("qo-bg-dark", (background-color: cl.$background-dark));
+@include mc.meta("qo-bg-dark-alt", (background-color: cl.$background-dark-a));
+@include mc.meta("qo-bg-medium", (background-color: cl.$background-medium));
+@include mc.meta("qo-bg-light", (background-color: cl.$background-light));
+@include mc.meta("qo-bg-tertiary", (background-color: cl.$background-tertiary));
+@include mc.meta("qo-bg-lime", (background-color: cl.$background-lime));

package/dist/src/utilities/border/_border-color.scss

@@ -1,33 +1,11 @@
-@use "../../base/color" as cl;
-
-.qo-border-primary {
-  border-color: cl.$border-primary;
-}
-
-.qo-border-secondary {
-  border-color: cl.$border-secondary;
-}
-
-.qo-border-success {
-  border-color: cl.$border-success;
-}
-
-.qo-border-warning {
-  border-color: cl.$border-warning;
-}
-
-.qo-border-danger {
-  border-color: cl.$border-danger;
-}
-
-.qo-border-info {
-  border-color: cl.$border-info;
-}
-
-.qo-border-light {
-  border-color: cl.$border-light;
-}
-
-.qo-border-dark {
-  border-color: cl.$border-dark;
-}
+@use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-border-primary", (border-color: cl.$border-primary));
+@include mc.meta("qo-border-secondary", (border-color: cl.$border-secondary));
+@include mc.meta("qo-border-success", (border-color: cl.$border-success));
+@include mc.meta("qo-border-warning", (border-color: cl.$border-warning));
+@include mc.meta("qo-border-danger", (border-color: cl.$border-danger));
+@include mc.meta("qo-border-info", (border-color: cl.$border-info));
+@include mc.meta("qo-border-light", (border-color: cl.$border-light));
+@include mc.meta("qo-border-dark", (border-color: cl.$border-dark));

package/dist/src/utilities/border/_border-radius.scss

@@ -1,29 +1,10 @@
 @use "../../base/border" as bo;
-
-.qo-border-radius-0 {
-  border-radius: bo.$border-radius-0;
-}
-
-.qo-border-radius-sm {
-  border-radius: bo.$border-radius-sm;
-}
-
-.qo-border-radius-md {
-  border-radius: bo.$border-radius-md;
-}
-
-.qo-border-radius-lg {
-  border-radius: bo.$border-radius-lg;
-}
-
-.qo-border-radius-xl {
-  border-radius: bo.$border-radius-xl;
-}
-
-.qo-border-radius-pill {
-  border-radius: bo.$border-radius-pill;
-}
-
-.qo-border-radius-full {
-  border-radius: bo.$border-radius-full;
-}
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-border-radius-0", (border-radius: bo.$border-radius-0));
+@include mc.meta("qo-border-radius-sm", (border-radius: bo.$border-radius-sm));
+@include mc.meta("qo-border-radius-md", (border-radius: bo.$border-radius-md));
+@include mc.meta("qo-border-radius-lg", (border-radius: bo.$border-radius-lg));
+@include mc.meta("qo-border-radius-xl", (border-radius: bo.$border-radius-xl));
+@include mc.meta("qo-border-radius-pill", (border-radius: bo.$border-radius-pill));
+@include mc.meta("qo-border-radius-full", (border-radius: bo.$border-radius-full));

package/dist/src/utilities/border/_border-size.scss

@@ -1,10 +1,8 @@
-@use "../../base/border" as bo;
-.qo-border-sm {
-  border-width: bo.$border-width-sm;
-}
-.qo-border-md {
-  border-width: bo.$border-width-md;
-}
-.qo-border-lg {
-  border-width: bo.$border-width-lg;
-}
+@use "../../base/border" as bo;
+@use "../../base/mixins/meta-class" as mc;
+
+
+@include mc.meta("qo-border-none", (border-width: bo.$border-width-none));
+@include mc.meta("qo-border-sm", (border-width: bo.$border-width-sm));
+@include mc.meta("qo-border-md", (border-width: bo.$border-width-md));
+@include mc.meta("qo-border-lg", (border-width: bo.$border-width-lg));

package/dist/src/utilities/box-shadow/index.scss

@@ -1,17 +1,8 @@
 @use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
 
-.qo-boxshadow-none {
-  box-shadow: none;
-}
-.qo-boxshadow-sm {
-  box-shadow: 0 1px 2px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-md {
-  box-shadow: 0 4px 8px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-lg {
-  box-shadow: 0 8px 16px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-xl {
-  box-shadow: 0 12px 24px 0 cl.$boxshadow-primary;
-}
+@include mc.meta("qo-boxshadow-none", (box-shadow: none));
+@include mc.meta("qo-boxshadow-sm", (box-shadow: 0 1px 2px 0 cl.$boxshadow-primary));
+@include mc.meta("qo-boxshadow-md", (box-shadow: 0 4px 8px 0 cl.$boxshadow-primary));
+@include mc.meta("qo-boxshadow-lg", (box-shadow: 0 8px 16px 0 cl.$boxshadow-primary));
+@include mc.meta("qo-boxshadow-xl", (box-shadow: 0 12px 24px 0 cl.$boxshadow-primary));

package/dist/src/utilities/spaces/_gap.scss

@@ -1,15 +1,8 @@
 @use "../../base/space" as sp;
+@use "../../base/mixins/meta-class" as mc;
 
 @each $key, $value in sp.$spacers {
-  .qo-gap-#{$key} {
-    gap: $value;
-  }
-
-  .qo-gap-x-#{$key} {
-    column-gap: $value;
-  }
-
-  .qo-gap-y-#{$key} {
-    row-gap: $value;
-  }
+  @include mc.meta("qo-gap-#{$key}", (gap: $value));
+  @include mc.meta("qo-gap-x-#{$key}", (column-gap: $value));
+  @include mc.meta("qo-gap-y-#{$key}", (row-gap: $value));
 }

package/dist/src/utilities/spaces/_margin.scss

@@ -1,4 +1,5 @@
 @use "../../base/space" as sp;
+@use "../../base/mixins/meta-class" as mc;
 
 $_directions: (
   "": "",
@@ -10,34 +11,25 @@ $_directions: (
 
 @each $key, $value in sp.$spacers {
   @each $dir-name, $dir-prop in $_directions {
-    .qo-margin-#{$dir-name}#{$key} {
-      @if $dir-prop == "" {
-        margin: $value;
-      } @else {
-        margin-#{$dir-prop}: $value;
-      }
+    @if $dir-prop == "" {
+      @include mc.meta("qo-margin-#{$dir-name}#{$key}", (margin: $value));
+    } @else {
+      @include mc.meta("qo-margin-#{$dir-name}#{$key}", (margin-#{$dir-prop}: $value));
     }
   }
 
-  .qo-margin-x-#{$key} {
-    margin-left: $value;
-    margin-right: $value;
-  }
-
-  .qo-margin-y-#{$key} {
-    margin-top: $value;
-    margin-bottom: $value;
-  }
+  @include mc.meta("qo-margin-x-#{$key}", (margin-left: $value, margin-right: $value));
+  @include mc.meta("qo-margin-y-#{$key}", (margin-top: $value, margin-bottom: $value));
 }
 
 // Auto margins
-.qo-margin-auto { margin: auto; }
-.qo-margin-x-auto { margin-left: auto; margin-right: auto; }
-.qo-margin-y-auto { margin-top: auto; margin-bottom: auto; }
-.qo-margin-top-auto { margin-top: auto; }
-.qo-margin-bottom-auto { margin-bottom: auto; }
-.qo-margin-left-auto { margin-left: auto; }
-.qo-margin-right-auto { margin-right: auto; }
+@include mc.meta("qo-margin-auto", (margin: auto));
+@include mc.meta("qo-margin-x-auto", (margin-left: auto, margin-right: auto));
+@include mc.meta("qo-margin-y-auto", (margin-top: auto, margin-bottom: auto));
+@include mc.meta("qo-margin-top-auto", (margin-top: auto));
+@include mc.meta("qo-margin-bottom-auto", (margin-bottom: auto));
+@include mc.meta("qo-margin-left-auto", (margin-left: auto));
+@include mc.meta("qo-margin-right-auto", (margin-right: auto));
 
 // @deprecated — typo aliases kept for backwards compatibility
 .qo-margin-botttom-sm { margin-bottom: sp.$space-sm; }

package/dist/src/utilities/spaces/_padding.scss

@@ -1,4 +1,5 @@
 @use "../../base/space" as sp;
+@use "../../base/mixins/meta-class" as mc;
 
 $_directions: (
   "": "",
@@ -10,24 +11,15 @@ $_directions: (
 
 @each $key, $value in sp.$spacers {
   @each $dir-name, $dir-prop in $_directions {
-    .qo-padding-#{$dir-name}#{$key} {
-      @if $dir-prop == "" {
-        padding: $value;
-      } @else {
-        padding-#{$dir-prop}: $value;
-      }
+    @if $dir-prop == "" {
+      @include mc.meta("qo-padding-#{$dir-name}#{$key}", (padding: $value));
+    } @else {
+      @include mc.meta("qo-padding-#{$dir-name}#{$key}", (padding-#{$dir-prop}: $value));
     }
   }
 
-  .qo-padding-x-#{$key} {
-    padding-left: $value;
-    padding-right: $value;
-  }
-
-  .qo-padding-y-#{$key} {
-    padding-top: $value;
-    padding-bottom: $value;
-  }
+  @include mc.meta("qo-padding-x-#{$key}", (padding-left: $value, padding-right: $value));
+  @include mc.meta("qo-padding-y-#{$key}", (padding-top: $value, padding-bottom: $value));
 }
 
 // @deprecated — typo aliases kept for backwards compatibility

package/dist/src/utilities/typography/_color.scss

@@ -1,38 +1,20 @@
 @use "sass:color";
 @use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
 
-.qo-text-primary {
-  color: cl.$text-primary;
-}
-.qo-text-secondary {
-  color: cl.$text-secondary;
-}
-.qo-text-success {
-  color: cl.$text-success;
-}
-.qo-text-warning {
-  color: cl.$text-warning;
-}
-.qo-text-danger {
-  color: cl.$text-danger;
-}
-.qo-text-info {
-  color: cl.$text-info;
-}
-.qo-text-default {
-  color: cl.$text-default;
-}
-.qo-text-dark {
-  color: cl.$text-dark;
-}
-.qo-text-light {
-  color: cl.$text-light;
-}
-.qo-text-tertiary {
-  color: cl.$text-tertiary;
-}
+@include mc.meta("qo-text-primary", (color: cl.$text-primary));
+@include mc.meta("qo-text-secondary", (color: cl.$text-secondary));
+@include mc.meta("qo-text-success", (color: cl.$text-success));
+@include mc.meta("qo-text-warning", (color: cl.$text-warning));
+@include mc.meta("qo-text-danger", (color: cl.$text-danger));
+@include mc.meta("qo-text-info", (color: cl.$text-info));
+@include mc.meta("qo-text-default", (color: cl.$text-default));
+@include mc.meta("qo-text-dark", (color: cl.$text-dark));
+@include mc.meta("qo-text-light", (color: cl.$text-light));
+@include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
 
 // Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
+// Intentionally NOT wrapped in meta() — button overrides must stay high specificity
 .qo-btn {
   &.qo-text-primary { color: cl.$text-primary; &:hover, &:focus, &:active { color: cl.$text-primary-hover; } }
   &.qo-text-secondary { color: cl.$text-secondary; &:hover, &:focus, &:active { color: cl.$text-dark; } }

package/dist/src/utilities/typography/_font.scss

@@ -1,63 +1,35 @@
-@use "../../base/font" as ft;
-@use "../../base/mixins/font_size-mx" as mx;
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
-
-.qo-font-family-primary {
-  font-family: ft.$font-family-primary;
-}
-
-.qo-font-family-secondary {
-  font-family: ft.$font-family-secondary;
-}
-
-.qo-font-xxs {
-  @include mx.font-size(ft.$font-size-xxs, ft.$line-height-xxs);
-}
-.qo-font-xs {
-  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
-}
-.qo-font-sm {
-  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
-}
-.qo-font-md {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-}
-.qo-font-lg {
-  @include mx.font-size(ft.$font-size-lg, ft.$line-height-lg);
-}
-.qo-font-xl {
-  @include mx.font-size(ft.$font-size-xl, ft.$line-height-xl);
-}
-.qo-font-xxl {
-  @include mx.font-size(ft.$font-size-xxl, ft.$line-height-xxl);
-}
-
-.qo-font-weight-light {
-  font-weight: ft.$font-weight-light;
-}
-.qo-font-weight-regular {
-  font-weight: ft.$font-weight-regular;
-}
-.qo-font-weight-medium {
-  font-weight: ft.$font-weight-medium;
-}
-.qo-font-weight-semibold {
-  font-weight: ft.$font-weight-semibold;
-}
-.qo-font-weight-bold {
-  font-weight: ft.$font-weight-bold;
-}
-.qo-font-weight-extrabold {
-  font-weight: ft.$font-weight-extrabold;
-}
-.qo-validation {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-  font-weight: ft.$font-weight-light;
-  margin-top: 2px;
-}
-
-h4 {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-  font-family: ft.$font-family-primary;
-  font-weight: ft.$font-weight-medium;
-}
+@use "../../base/font" as ft;
+@use "../../base/mixins/meta-class" as mc;
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
+
+@include mc.meta("qo-font-family-primary", (font-family: ft.$font-family-primary));
+@include mc.meta("qo-font-family-secondary", (font-family: ft.$font-family-secondary));
+
+@include mc.meta("qo-font-xxs", (font-size: ft.$font-size-xxs, line-height: ft.$line-height-xxs));
+@include mc.meta("qo-font-xs", (font-size: ft.$font-size-xs, line-height: ft.$line-height-xs));
+@include mc.meta("qo-font-sm", (font-size: ft.$font-size-sm, line-height: ft.$line-height-sm));
+@include mc.meta("qo-font-md", (font-size: ft.$font-size-md, line-height: ft.$line-height-md));
+@include mc.meta("qo-font-lg", (font-size: ft.$font-size-lg, line-height: ft.$line-height-lg));
+@include mc.meta("qo-font-xl", (font-size: ft.$font-size-xl, line-height: ft.$line-height-xl));
+@include mc.meta("qo-font-xxl", (font-size: ft.$font-size-xxl, line-height: ft.$line-height-xxl));
+
+@include mc.meta("qo-font-weight-light", (font-weight: ft.$font-weight-light));
+@include mc.meta("qo-font-weight-regular", (font-weight: ft.$font-weight-regular));
+@include mc.meta("qo-font-weight-medium", (font-weight: ft.$font-weight-medium));
+@include mc.meta("qo-font-weight-semibold", (font-weight: ft.$font-weight-semibold));
+@include mc.meta("qo-font-weight-bold", (font-weight: ft.$font-weight-bold));
+@include mc.meta("qo-font-weight-extrabold", (font-weight: ft.$font-weight-extrabold));
+
+.qo-validation {
+  font-size: ft.$font-size-md;
+  line-height: ft.$line-height-md;
+  font-weight: ft.$font-weight-light;
+  margin-top: 2px;
+}
+
+h4 {
+  font-size: ft.$font-size-md;
+  line-height: ft.$line-height-md;
+  font-family: ft.$font-family-primary;
+  font-weight: ft.$font-weight-medium;
+}

package/dist/types/components.d.ts

@@ -1,10 +1,12 @@
 export declare const buttons = "./components/_buttons.scss";
 export declare const input = "./components/_input.scss";
+export declare const placeholder = "./components/_placeholder.scss";
 export declare const cards = "./components/_cards.scss";
 export declare const allComponents: string[];
 declare const _default: {
     buttons: string;
     input: string;
+    placeholder: string;
     cards: string;
     all: string[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procode-vs-theme",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "VarStreet VS Theme - A comprehensive SCSS theme package for ProCode framework with variables, components, layout, and utilities for flexible design system usage",
   "type": "module",
   "main": "dist/index.js",

package/src/base/_border.scss

@@ -6,6 +6,7 @@ $border-radius-xl: 1rem !default;
 $border-radius-pill: 50rem !default;
 $border-radius-full: 50% !default;
 
+$border-width-none: 0 !default;
 $border-width-sm: 1px !default;
 $border-width-md: 2px !default;
 $border-width-lg: 4px !default;

package/src/base/_color.scss

@@ -10,6 +10,7 @@ $text-default: #808080 !default;
 $text-dark: #464646 !default;
 $text-light: #ffffff !default;
 $text-tertiary: #ed5085 !default;
+$text-placeholder: #808080 !default;
 
 $text-primary-hover: #1c428d !default;
 $text-danger-hover: #af251c !default;
@@ -21,13 +22,16 @@ $background-warning: #f97d0b !default;
 $background-danger: #e74c3c !default;
 $background-info: #17baff !default;
 $background-default: #ffffff !default;
-$background-dark: #29466e !default;
+$background-medium: #29466e !default;
+$background-dark: #0f233d !default;
 $background-dark-a: #0f233d33 !default;
-$background-light: #F7F7F7 !default;
+$background-light: #f7f7f7 !default;
 $background-tertiary: #ed5085 !default;
 $background-lime: #f3de1d !default;
 $background-transparent: color.change(#000000, $alpha: 0.1) !default;
 
+$background-disabled: #d9d9d9 !default;
+
 $border-primary: #2666e3 !default;
 $border-secondary: #c6c6c6 !default;
 $border-success: #67b926 !default;