@aquera/nile-elements 0.1.39-beta-1.1 → 0.1.39-beta-1.2

package/demo/nxtgen.css

@@ -412,6 +412,18 @@
   --ng-spacing-2-5: 10px;
   --ng-spacing-3-5: 14px;
   --ng-spacing-4-5: 18px;
+
+  /* Typography tokens */
+  
+  --ng-font-weight-100: 100;
+  --ng-font-weight-200: 200;
+  --ng-font-weight-300: 300;
+  --ng-font-weight-400: 400;
+  --ng-font-weight-500: 500;
+  --ng-font-weight-600: 600;
+  --ng-font-weight-700: 700;
+  --ng-font-weight-800: 800;
+  --ng-font-weight-900: 900;
 }
 
 :root {
@@ -766,13 +778,13 @@
 :root {
   --ng-font-family-display: Inter;
   --ng-font-family-body: Inter;
-  --ng-font-weight-regular: Regular;
+  --ng-font-weight-regular: var(--ng-font-weight-400);
+  --ng-font-weight-medium: var(--ng-font-weight-500);
+  --ng-font-weight-semibold: var(--ng-font-weight-600);
+  --ng-font-weight-bold: var(--ng-font-weight-700);
   --ng-font-weight-regular-italic: Regular italic;
-  --ng-font-weight-medium: Medium;
   --ng-font-weight-medium-italic: Medium italic;
-  --ng-font-weight-semibold: Semibold;
   --ng-font-weight-semibold-italic: Semibold italic;
-  --ng-font-weight-bold: Bold;
   --ng-font-weight-bold-italic: Bold italic;
   --ng-font-size-text-xs: 12px;
   --ng-line-height-text-xs: 18px;
@@ -796,23 +808,11 @@
   --ng-font-size-display-lg: 48px;
   --ng-font-size-display-xl: 60px;
   --ng-font-size-display-2xl: 72px;
-
-  --ng-font-weight-100: 100;
-  --ng-font-weight-200: 200;
-  --ng-font-weight-300: 300;
-  --ng-font-weight-400: 400;
-  --ng-font-weight-500: 500;
-  --ng-font-weight-600: 600;
-  --ng-font-weight-700: 700;
-  --ng-font-weight-800: 800;
-  --ng-font-weight-900: 900;
   --ng-font-weight-lighter: lighter;
   --ng-font-weight-bolder: bolder;
   --ng-font-weight-inherit: inherit;
   --ng-font-weight-initial: initial;
   --ng-font-weight-unset: unset;
-
-
   --ng-text-decoration-underline: underline;
   --ng-text-decoration-overline: overline;
   --ng-text-decoration-line-through: line-through;
@@ -825,6 +825,10 @@
   --ng-text-decoration-thin: thin;
   --ng-text-decoration-thick: thick;
 
+
+  --ng-webkit-font-smoothing: antialiased;
+  --ng-moz-osx-font-smoothing: grayscale;
+  --ng-text-rendering: optimizeLegibility;
 }
 
 /* 4. Widths - Mode 1 */
@@ -1116,22 +1120,34 @@
 }
 
 :root{
-    --nile-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graylightmode-600) 0%, var(--ng-color-graylightmode-500) 100%);
-    --nile-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graylightmode-700) 0%, var(--ng-color-graylightmode-600) 100%);
-    --nile-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graylightmode-800) 0%, var(--ng-color-graylightmode-600) 100%);
-    --nile-gray-gradient-4: linear-gradient(63deg, var(--ng-color-graylightmode-800) 16.72%, var(--ng-color-graylightmode-600) 83.39%);
-    --nile-gray-gradient-5: linear-gradient(27deg, var(--ng-color-graylightmode-800) 8.33%, var(--ng-color-graylightmode-700) 91.67%);
-    --nile-gray-gradient-6: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-600) 100%);
-    --nile-gray-gradient-7: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-700) 100%);
+    --ng-gray-gradient-1: linear-gradient(90deg, var(--ng-color-graylightmode-600) 0%, var(--ng-color-graylightmode-500) 100%);
+    --ng-gray-gradient-2: linear-gradient(45deg, var(--ng-color-graylightmode-700) 0%, var(--ng-color-graylightmode-600) 100%);
+    --ng-gray-gradient-3: linear-gradient(45deg, var(--ng-color-graylightmode-800) 0%, var(--ng-color-graylightmode-600) 100%);
+    --ng-gray-gradient-4: linear-gradient(63deg, var(--ng-color-graylightmode-800) 16.72%, var(--ng-color-graylightmode-600) 83.39%);
+    --ng-gray-gradient-5: linear-gradient(27deg, var(--ng-color-graylightmode-800) 8.33%, var(--ng-color-graylightmode-700) 91.67%);
+    --ng-gray-gradient-6: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-600) 100%);
+    --ng-gray-gradient-7: linear-gradient(45deg, var(--ng-color-graylightmode-900) 0%, var(--ng-color-graylightmode-700) 100%);
+
+    --ng-primary-gradient-1: linear-gradient(90deg, var(--ng-color-bluedark-600) 0%, var(--ng-color-bluedark-500) 100%);
+    --ng-primary-gradient-2: linear-gradient(45deg, var(--ng-color-bluedark-700) 0%, var(--ng-color-bluedark-600) 100%);
+    --ng-primary-gradient-3: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-600) 100%);
+    --ng-primary-gradient-4: linear-gradient(63deg, var(--ng-color-bluedark-800) 16.72%, var(--ng-color-bluedark-600) 83.39%);
+    --ng-primary-gradient-5: linear-gradient(27deg, var(--ng-color-bluedark-800) 8.33%, var(--ng-color-bluedark-700) 91.67%);
+    --ng-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-600) 100%);
+    --ng-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-700) 100%);
+    --ng-primary-standard: linear-gradient(180deg, var(--ng-colors-fg-white) 0%, var(--ng-colors-bg-brand-primary) 100%);
+
+    --ng-white-gradient-1: linear-gradient(180deg, var(--ng-color-base-white) 0%, var(--ng-color-graylightmode-50) 100%);
+    --ng-white-gradient-2: linear-gradient(180deg, var(--ng-color-base-white) 0%, var(--ng-color-graylightmode-100) 100%);
+    --ng-white-gradient-3: linear-gradient(180deg, var(--ng-color-graylightmode-25) 0%, var(--ng-color-graylightmode-100) 100%);
+    --ng-white-gradient-4: linear-gradient(180deg, var(--ng-color-graylightmode-50) 0%, var(--ng-color-graylightmode-100) 100%);
+    --ng-white-gradient-5: linear-gradient(180deg, var(--ng-color-graylightmode-25) 0%, var(--ng-color-graylightmode-200) 100%);
+    --ng-white-gradient-6: linear-gradient(180deg, var(--ng-color-graylightmode-50) 0%, var(--ng-color-graylightmode-200) 100%);
+    --ng-white-gradient-7: linear-gradient(180deg, var(--ng-color-graylightmode-100) 0%, var(--ng-color-graylightmode-200) 100%);
+
+    --ng-skeuemorphic-gradient-border: linear-gradient(180deg, var(--ng-componentcolors-alpha-white-10) 0%, var(--ng-color-base-transparent) 100%);
+
 
-    --nile-primary-gradient-1: linear-gradient(90deg, var(--ng-color-bluedark-600) 0%, var(--ng-color-bluedark-500) 100%);
-    --nile-primary-gradient-2: linear-gradient(45deg, var(--ng-color-bluedark-700) 0%, var(--ng-color-bluedark-600) 100%);
-    --nile-primary-gradient-3: linear-gradient(45deg, var(--ng-color-bluedark-800) 0%, var(--ng-color-bluedark-600) 100%);
-    --nile-primary-gradient-4: linear-gradient(63deg, var(--ng-color-bluedark-800) 16.72%, var(--ng-color-bluedark-600) 83.39%);
-    --nile-primary-gradient-5: linear-gradient(27deg, var(--ng-color-bluedark-800) 8.33%, var(--ng-color-bluedark-700) 91.67%);
-    --nile-primary-gradient-6: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-600) 100%);
-    --nile-primary-gradient-7: linear-gradient(45deg, var(--ng-color-bluedark-900) 0%, var(--ng-color-bluedark-700) 100%);
-    --nile-primary-standard: linear-gradient(180deg, var(--ng-colors-fg-white) 0%, var(--ng-colors-bg-brand-primary) 100%);
 
 
 

package/demo/variables.css

@@ -680,7 +680,7 @@
 --nile-height-180px: 180px;
 --nile-height-190px: 190px;
 --nile-height-200px: 200px;
-
+--nile-height-247px: 247px;
 
  /* Outline */
 
@@ -807,5 +807,10 @@
 /* Font Size */
 
 --nile-font-size-6-7: 6.516px;
---nile-font-family-inherit:inherit
+--nile-font-family-inherit:inherit;
+
+
+  --nile-webkit-font-smoothing: antialiased;
+  --nile-moz-osx-font-smoothing: grayscale;
+  --nile-text-rendering: optimizeLegibility;
 }