@nightshadeui/stylesheets 2.6.0 → 2.7.0

package/index.css

@@ -4,6 +4,7 @@
 @import './variables/font.css' layer(nightshade);
 @import './variables/ui.css' layer(nightshade);
 @import './variables/colors.css' layer(nightshade);
+@import './variables/input-sizes.css' layer(nightshade);
 
 @import './commons.css' layer(nightshade);
 @import './util.css' layer(nightshade);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nightshadeui/stylesheets",
-    "version": "2.6.0",
+    "version": "2.7.0",
     "description": "Nightshade UI CSS",
     "author": "Boris Okunskiy",
     "license": "ISC",

package/variables/base.css

@@ -26,13 +26,6 @@
 
     /* Inputs */
 
-    --input-size: var(--input-size-m);
-    --input-size-xs: var(--sp2);
-    --input-size-s: var(--sp3);
-    --input-size-m: var(--sp4);
-    --input-size-l: var(--sp5);
-    --input-size-xl: var(--sp6);
-
     --input-radius: var(--border-radius-s);
     --input-radius-round: var(--border-radius-l);
     --input-radius-full: var(--border-radius-xl);

package/variables/font.css

@@ -4,14 +4,14 @@
     --font-monospace: monospace;
 
     --font-size: var(--font-size-m);
-    --font-size-xxs: 10px;
-    --font-size-xs: 12px;
-    --font-size-s: 14px;
+    --font-size-xxs: calc(var(--font-size-m) - 6px);
+    --font-size-xs: calc(var(--font-size-m) - 4px);
+    --font-size-s: calc(var(--font-size-m) - 2px);
     --font-size-m: 16px;
-    --font-size-l: 18px;
-    --font-size-xl: 24px;
-    --font-size-xxl: 48px;
-    --font-size-xxxl: 64px;
+    --font-size-l: calc(var(--font-size-m) * 1.25);
+    --font-size-xl: calc(var(--font-size-m) * 1.5);
+    --font-size-xxl: calc(var(--font-size-m) * 1.875);
+    --font-size-xxxl: calc(var(--font-size-m) * 2.25);
 
     --font-weight: var(--font-weight-normal);
     --font-weight-thin: 200;

package/variables/input-sizes.css

@@ -0,0 +1,86 @@
+:root {
+
+    /* Default size */
+
+    --input-height: var(--input-size-m);
+    --input-font-size: var(--font-size-m);
+    --input-padding: var(--sp1-5);
+    --input-gap: var(--sp1);
+
+    /* Sizes */
+
+    --input-size-xs-height: var(--sp2-5);
+    --input-size-xs-font-size: var(--font-size-xs);
+    --input-size-xs-padding: var(--sp);
+    --input-size-xs-gap: var(--sp0-5);
+
+    --input-size-s-height: var(--sp3);
+    --input-size-s-font-size: var(--font-size-s);
+    --input-size-s-padding: var(--sp1);
+    --input-size-s-gap: var(--sp0-5);
+
+    --input-size-m-height: var(--sp4);
+    --input-size-m-font-size: var(--font-size-m);
+    --input-size-m-padding: var(--sp1-5);
+    --input-size-m-gap: var(--sp1);
+
+    --input-size-l-height: var(--sp5);
+    --input-size-l-font-size: var(--font-size-m);
+    --input-size-l-padding: var(--sp2);
+    --input-size-l-gap: var(--sp1);
+
+    --input-size-xl-height: var(--sp6);
+    --input-size-xl-font-size: var(--font-size-l);
+    --input-size-xl-padding: var(--sp2-5);
+    --input-size-xl-gap: var(--sp1-5);
+
+}
+
+.input-size-xxs {
+    --input-height: var(--input-size-xxs-height);
+    --input-font-size: var(--input-size-xxs-font-size);
+    --input-padding: var(--input-size-xxs-padding);
+    --input-gap: var(--input-size-xxs-gap);
+}
+
+.input-size-xs {
+    --input-height: var(--input-size-xs-height);
+    --input-font-size: var(--input-size-xs-font-size);
+    --input-padding: var(--input-size-xs-padding);
+    --input-gap: var(--input-size-xs-gap);
+}
+
+.input-size-s, .input-size-small {
+    --input-height: var(--input-size-s-height);
+    --input-font-size: var(--input-size-s-font-size);
+    --input-padding: var(--input-size-s-padding);
+    --input-gap: var(--input-size-s-gap);
+}
+
+.input-size-m, .input-size-medium, .input-size-normal {
+    --input-height: var(--input-size-m-height);
+    --input-font-size: var(--input-size-m-font-size);
+    --input-padding: var(--input-size-m-padding);
+    --input-gap: var(--input-size-m-gap);
+}
+
+.input-size-l, .input-size-large {
+    --input-height: var(--input-size-l-height); 
+    --input-font-size: var(--input-size-l-font-size);
+    --input-padding: var(--input-size-l-padding);
+    --input-gap: var(--input-size-l-gap);
+}
+
+.input-size-xl {
+    --input-height: var(--input-size-xl-height);
+    --input-font-size: var(--input-size-xl-font-size);
+    --input-padding: var(--input-size-xl-padding);
+    --input-gap: var(--input-size-xl-gap);
+}
+
+.input-size-xxl {
+    --input-height: var(--input-size-xxl-height);
+    --input-font-size: var(--input-size-xxl-font-size);
+    --input-padding: var(--input-size-xxl-padding);
+    --input-gap: var(--input-size-xxl-gap);
+}