@iamgld/ui 1.21.2 → 21.0.0

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@iamgld/ui",
-  "version": "1.21.2",
-  "publishConfig": {
-    "access": "public"
-  },
+  "version": "21.0.0",
   "peerDependencies": {
-    "@angular/common": "19.2.1",
-    "@angular/core": "19.2.1"
+    "@angular/common": "21.0.1",
+    "@angular/core": "21.0.1"
   },
   "dependencies": {
     "tslib": "2.8.1"
   },
   "sideEffects": false,
   "module": "fesm2022/iamgld-ui.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/iamgld-ui.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/iamgld-ui.d.ts",
       "default": "./fesm2022/iamgld-ui.mjs"
     }
   }

package/public/styles/layers/_base.scss

@@ -1,56 +1,56 @@
-@use './setting' as setting;
-@use './tools' as tools;
-
-/*
-  En esta capa estarán:
-    1. Estilos que normalizan comportamiento en distintos entornos
-    2. Reset de estilos ejm. normalize css etc..
-*/
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  min-width: 0;
-}
-
-html,
-body {
-  font-family: var(--gld-font--poppins);
-}
-
-body {
-  margin: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-  margin: 0;
-}
-
-p {
-  text-wrap: pretty;
-  margin: 0;
-}
-
-// Themes
-body.theme--light {
-  color-scheme: light;
-  --gld-foreground-color: var(--gld-darkblue);
-  --gld-background-color: var(--gld-whitelight);
-}
-body.theme--dark {
-  color-scheme: dark;
-  --gld-foreground-color: var(--gld-whitelight);
-  --gld-background-color: var(--gld-darkblue);
-}
-body.theme--system {
-  color-scheme: light dark;
-  --gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));
-  --gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue));
-}
+@use './setting' as setting;
+@use './tools' as tools;
+
+/*
+  En esta capa estarán:
+    1. Estilos que normalizan comportamiento en distintos entornos
+    2. Reset de estilos ejm. normalize css etc..
+*/
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+html,
+body {
+  font-family: var(--gld-font--poppins);
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  margin: 0;
+}
+
+p {
+  text-wrap: pretty;
+  margin: 0;
+}
+
+// Themes
+body.theme--light {
+  color-scheme: light;
+  --gld-foreground-color: var(--gld-darkblue);
+  --gld-background-color: var(--gld-whitelight);
+}
+body.theme--dark {
+  color-scheme: dark;
+  --gld-foreground-color: var(--gld-whitelight);
+  --gld-background-color: var(--gld-darkblue);
+}
+body.theme--system {
+  color-scheme: light dark;
+  --gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));
+  --gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue));
+}

package/public/styles/layers/_objects.scss

@@ -1,9 +1,9 @@
-@use './setting' as setting;
-@use './tools' as tools;
-
-/*
-  En esta capa estarán:
-    1. Patrones de diseños, elementos reutilizables
-    2. No cosméticos, ni colores, ni tipografías
-    3. Exclusivamente se usaran selectores de clase
-*/
+@use './setting' as setting;
+@use './tools' as tools;
+
+/*
+  En esta capa estarán:
+    1. Patrones de diseños, elementos reutilizables
+    2. No cosméticos, ni colores, ni tipografías
+    3. Exclusivamente se usaran selectores de clase
+*/

package/public/styles/layers/_setting.scss

@@ -1,185 +1,185 @@
-/*
-  En esta capa estarán:
-    1. configuraciones disponibles globalmente
-    2. cambios de configuraciones
-    3. colores representativos de la marca o empresa
-*/
-
-:root {
-  // Breakpoints
-  --gld-break-point--zero: 0;
-  --gld-break-point--mobile: 320px;
-  --gld-break-point--landscape: 576px;
-  --gld-break-point--tablet: 768px;
-  --gld-break-point--desktop: 1080px;
-  --gld-break-point--extra-desktop: 1280px;
-
-  // Fonts
-  --gld-font-size--heading-one: 36px;
-  --gld-font-size--heading-two: 26px;
-  --gld-font-size--heading-three: 20px;
-  --gld-font-size--normal: 16px;
-  --gld-font-size--small: 12px;
-  --gld-font-size--tiny: 8px;
-  --gld-font--poppins: 'Poppins', sans-serif;
-
-  // Radius
-  --gld-radius--z: 0;
-  --gld-radius--xxxs: 4px;
-  --gld-radius--xxs: 6px;
-  --gld-radius--xs: 8px;
-  --gld-radius--s: 12px;
-  --gld-radius--m: 16px;
-  --gld-radius--l: 24px;
-  --gld-radius--xl: 32px;
-  --gld-radius--xxl: 40px;
-
-  // Spacing
-  --gld-spacing--z: 0;
-  --gld-spacing--xxxs: 4px;
-  --gld-spacing--xxs: 8px;
-  --gld-spacing--xs: 12px;
-  --gld-spacing--s: 16px;
-  --gld-spacing--m: 24px;
-  --gld-spacing--l: 32px;
-  --gld-spacing--xl: 48px;
-  --gld-spacing--xxl: 70px;
-
-  // Z Index
-  --gld-zindex--one: 1000;
-  --gld-zindex--two: 2000;
-  --gld-zindex--three: 3000;
-  --gld-zindex--four: 4000;
-  --gld-zindex--five: 5000;
-
-  // Icons Size
-  --gld-icon-size--large: 48px;
-  --gld-icon-size--medium: 40px;
-  --gld-icon-size--normal: 32px;
-  --gld-icon-size--small: 24px;
-  --gld-icon-size--tiny: 16px;
-
-  // Colors
-  --gld-red: #ef4444;
-  --gld-red-transparent--005: #{rgba(#ef4444, 0.05)};
-  --gld-red-transparent--010: #{rgba(#ef4444, 0.1)};
-  --gld-red-transparent--020: #{rgba(#ef4444, 0.2)};
-  --gld-red-transparent--030: #{rgba(#ef4444, 0.3)};
-  --gld-red-transparent--040: #{rgba(#ef4444, 0.4)};
-  --gld-red-transparent--050: #{rgba(#ef4444, 0.5)};
-  --gld-red-transparent--060: #{rgba(#ef4444, 0.6)};
-  --gld-red-transparent--070: #{rgba(#ef4444, 0.7)};
-  --gld-red-transparent--080: #{rgba(#ef4444, 0.8)};
-  --gld-red-transparent--090: #{rgba(#ef4444, 0.9)};
-  --gld-blue: #3c82f6;
-  --gld-blue-transparent--005: #{rgba(#3c82f6, 0.05)};
-  --gld-blue-transparent--010: #{rgba(#3c82f6, 0.1)};
-  --gld-blue-transparent--020: #{rgba(#3c82f6, 0.2)};
-  --gld-blue-transparent--030: #{rgba(#3c82f6, 0.3)};
-  --gld-blue-transparent--040: #{rgba(#3c82f6, 0.4)};
-  --gld-blue-transparent--050: #{rgba(#3c82f6, 0.5)};
-  --gld-blue-transparent--060: #{rgba(#3c82f6, 0.6)};
-  --gld-blue-transparent--070: #{rgba(#3c82f6, 0.7)};
-  --gld-blue-transparent--080: #{rgba(#3c82f6, 0.8)};
-  --gld-blue-transparent--090: #{rgba(#3c82f6, 0.9)};
-  --gld-green: #12b981;
-  --gld-green-transparent--005: #{rgba(#12b981, 0.05)};
-  --gld-green-transparent--010: #{rgba(#12b981, 0.1)};
-  --gld-green-transparent--020: #{rgba(#12b981, 0.2)};
-  --gld-green-transparent--030: #{rgba(#12b981, 0.3)};
-  --gld-green-transparent--040: #{rgba(#12b981, 0.4)};
-  --gld-green-transparent--050: #{rgba(#12b981, 0.5)};
-  --gld-green-transparent--060: #{rgba(#12b981, 0.6)};
-  --gld-green-transparent--070: #{rgba(#12b981, 0.7)};
-  --gld-green-transparent--080: #{rgba(#12b981, 0.8)};
-  --gld-green-transparent--090: #{rgba(#12b981, 0.9)};
-  --gld-purple: #a855f7;
-  --gld-purple-transparent--005: #{rgba(#a855f7, 0.05)};
-  --gld-purple-transparent--010: #{rgba(#a855f7, 0.1)};
-  --gld-purple-transparent--020: #{rgba(#a855f7, 0.2)};
-  --gld-purple-transparent--030: #{rgba(#a855f7, 0.3)};
-  --gld-purple-transparent--040: #{rgba(#a855f7, 0.4)};
-  --gld-purple-transparent--050: #{rgba(#a855f7, 0.5)};
-  --gld-purple-transparent--060: #{rgba(#a855f7, 0.6)};
-  --gld-purple-transparent--070: #{rgba(#a855f7, 0.7)};
-  --gld-purple-transparent--080: #{rgba(#a855f7, 0.8)};
-  --gld-purple-transparent--090: #{rgba(#a855f7, 0.9)};
-  --gld-mustard: #ebb305;
-  --gld-mustard-transparent--005: #{rgba(#ebb305, 0.05)};
-  --gld-mustard-transparent--010: #{rgba(#ebb305, 0.1)};
-  --gld-mustard-transparent--020: #{rgba(#ebb305, 0.2)};
-  --gld-mustard-transparent--030: #{rgba(#ebb305, 0.3)};
-  --gld-mustard-transparent--040: #{rgba(#ebb305, 0.4)};
-  --gld-mustard-transparent--050: #{rgba(#ebb305, 0.5)};
-  --gld-mustard-transparent--060: #{rgba(#ebb305, 0.6)};
-  --gld-mustard-transparent--070: #{rgba(#ebb305, 0.7)};
-  --gld-mustard-transparent--080: #{rgba(#ebb305, 0.8)};
-  --gld-mustard-transparent--090: #{rgba(#ebb305, 0.9)};
-  --gld-orange: #f97315;
-  --gld-orange-transparent--005: #{rgba(#f97315, 0.05)};
-  --gld-orange-transparent--010: #{rgba(#f97315, 0.1)};
-  --gld-orange-transparent--020: #{rgba(#f97315, 0.2)};
-  --gld-orange-transparent--030: #{rgba(#f97315, 0.3)};
-  --gld-orange-transparent--040: #{rgba(#f97315, 0.4)};
-  --gld-orange-transparent--050: #{rgba(#f97315, 0.5)};
-  --gld-orange-transparent--060: #{rgba(#f97315, 0.6)};
-  --gld-orange-transparent--070: #{rgba(#f97315, 0.7)};
-  --gld-orange-transparent--080: #{rgba(#f97315, 0.8)};
-  --gld-orange-transparent--090: #{rgba(#f97315, 0.9)};
-  --gld-pink: #ec4899;
-  --gld-pink-transparent--005: #{rgba(#ec4899, 0.05)};
-  --gld-pink-transparent--010: #{rgba(#ec4899, 0.1)};
-  --gld-pink-transparent--020: #{rgba(#ec4899, 0.2)};
-  --gld-pink-transparent--030: #{rgba(#ec4899, 0.3)};
-  --gld-pink-transparent--040: #{rgba(#ec4899, 0.4)};
-  --gld-pink-transparent--050: #{rgba(#ec4899, 0.5)};
-  --gld-pink-transparent--060: #{rgba(#ec4899, 0.6)};
-  --gld-pink-transparent--070: #{rgba(#ec4899, 0.7)};
-  --gld-pink-transparent--080: #{rgba(#ec4899, 0.8)};
-  --gld-pink-transparent--090: #{rgba(#ec4899, 0.9)};
-  --gld-gray: #c1c7e1;
-  --gld-gray-transparent--010: #{rgba(#c1c7e1, 0.1)};
-  --gld-gray-transparent--020: #{rgba(#c1c7e1, 0.2)};
-  --gld-gray-transparent--030: #{rgba(#c1c7e1, 0.3)};
-  --gld-gray-transparent--040: #{rgba(#c1c7e1, 0.4)};
-  --gld-gray-transparent--050: #{rgba(#c1c7e1, 0.5)};
-  --gld-gray-transparent--060: #{rgba(#c1c7e1, 0.6)};
-  --gld-gray-transparent--070: #{rgba(#c1c7e1, 0.7)};
-  --gld-gray-transparent--080: #{rgba(#c1c7e1, 0.8)};
-  --gld-gray-transparent--090: #{rgba(#c1c7e1, 0.9)};
-  --gld-white: #fff;
-  --gld-whitelight: #f9fafb;
-  --gld-whitelight-transparent--010: #{rgba(#f9fafb, 0.1)};
-  --gld-whitelight-transparent--020: #{rgba(#f9fafb, 0.2)};
-  --gld-whitelight-transparent--030: #{rgba(#f9fafb, 0.3)};
-  --gld-whitelight-transparent--040: #{rgba(#f9fafb, 0.4)};
-  --gld-whitelight-transparent--050: #{rgba(#f9fafb, 0.5)};
-  --gld-whitelight-transparent--060: #{rgba(#f9fafb, 0.6)};
-  --gld-whitelight-transparent--070: #{rgba(#f9fafb, 0.7)};
-  --gld-whitelight-transparent--080: #{rgba(#f9fafb, 0.8)};
-  --gld-whitelight-transparent--090: #{rgba(#f9fafb, 0.9)};
-  --gld-darkblue: #101827;
-  --gld-darkblue-transparent--010: #{rgba(#101827, 0.1)};
-  --gld-darkblue-transparent--020: #{rgba(#101827, 0.2)};
-  --gld-darkblue-transparent--030: #{rgba(#101827, 0.3)};
-  --gld-darkblue-transparent--040: #{rgba(#101827, 0.4)};
-  --gld-darkblue-transparent--050: #{rgba(#101827, 0.5)};
-  --gld-darkblue-transparent--060: #{rgba(#101827, 0.6)};
-  --gld-darkblue-transparent--070: #{rgba(#101827, 0.7)};
-  --gld-darkblue-transparent--080: #{rgba(#101827, 0.8)};
-  --gld-darkblue-transparent--090: #{rgba(#101827, 0.9)};
-
-  // Borders
-  --gld-border-size: 1px;
-
-  // Animations
-  --gld-animation-time--150: 150ms;
-  --gld-animation-time--250: 250ms;
-  --gld-animation-time--10s: 10s;
-
-  // General
-  --gld-line-height: 1.2;
-  --gld-max-width: 1280px;
-  --gld-navbar-height: 50px;
-  --gld-sidebar-width: 250px;
-}
+/*
+  En esta capa estarán:
+    1. configuraciones disponibles globalmente
+    2. cambios de configuraciones
+    3. colores representativos de la marca o empresa
+*/
+
+:root {
+  // Breakpoints
+  --gld-break-point--zero: 0;
+  --gld-break-point--mobile: 320px;
+  --gld-break-point--landscape: 576px;
+  --gld-break-point--tablet: 768px;
+  --gld-break-point--desktop: 1080px;
+  --gld-break-point--extra-desktop: 1280px;
+
+  // Fonts
+  --gld-font-size--heading-one: 36px;
+  --gld-font-size--heading-two: 26px;
+  --gld-font-size--heading-three: 20px;
+  --gld-font-size--normal: 16px;
+  --gld-font-size--small: 12px;
+  --gld-font-size--tiny: 8px;
+  --gld-font--poppins: 'Poppins', sans-serif;
+
+  // Radius
+  --gld-radius--z: 0;
+  --gld-radius--xxxs: 4px;
+  --gld-radius--xxs: 6px;
+  --gld-radius--xs: 8px;
+  --gld-radius--s: 12px;
+  --gld-radius--m: 16px;
+  --gld-radius--l: 24px;
+  --gld-radius--xl: 32px;
+  --gld-radius--xxl: 40px;
+
+  // Spacing
+  --gld-spacing--z: 0;
+  --gld-spacing--xxxs: 4px;
+  --gld-spacing--xxs: 8px;
+  --gld-spacing--xs: 12px;
+  --gld-spacing--s: 16px;
+  --gld-spacing--m: 24px;
+  --gld-spacing--l: 32px;
+  --gld-spacing--xl: 48px;
+  --gld-spacing--xxl: 70px;
+
+  // Z Index
+  --gld-zindex--one: 1000;
+  --gld-zindex--two: 2000;
+  --gld-zindex--three: 3000;
+  --gld-zindex--four: 4000;
+  --gld-zindex--five: 5000;
+
+  // Icons Size
+  --gld-icon-size--large: 48px;
+  --gld-icon-size--medium: 40px;
+  --gld-icon-size--normal: 32px;
+  --gld-icon-size--small: 24px;
+  --gld-icon-size--tiny: 16px;
+
+  // Colors
+  --gld-red: #ef4444;
+  --gld-red-transparent--005: #{rgba(#ef4444, 0.05)};
+  --gld-red-transparent--010: #{rgba(#ef4444, 0.1)};
+  --gld-red-transparent--020: #{rgba(#ef4444, 0.2)};
+  --gld-red-transparent--030: #{rgba(#ef4444, 0.3)};
+  --gld-red-transparent--040: #{rgba(#ef4444, 0.4)};
+  --gld-red-transparent--050: #{rgba(#ef4444, 0.5)};
+  --gld-red-transparent--060: #{rgba(#ef4444, 0.6)};
+  --gld-red-transparent--070: #{rgba(#ef4444, 0.7)};
+  --gld-red-transparent--080: #{rgba(#ef4444, 0.8)};
+  --gld-red-transparent--090: #{rgba(#ef4444, 0.9)};
+  --gld-blue: #3c82f6;
+  --gld-blue-transparent--005: #{rgba(#3c82f6, 0.05)};
+  --gld-blue-transparent--010: #{rgba(#3c82f6, 0.1)};
+  --gld-blue-transparent--020: #{rgba(#3c82f6, 0.2)};
+  --gld-blue-transparent--030: #{rgba(#3c82f6, 0.3)};
+  --gld-blue-transparent--040: #{rgba(#3c82f6, 0.4)};
+  --gld-blue-transparent--050: #{rgba(#3c82f6, 0.5)};
+  --gld-blue-transparent--060: #{rgba(#3c82f6, 0.6)};
+  --gld-blue-transparent--070: #{rgba(#3c82f6, 0.7)};
+  --gld-blue-transparent--080: #{rgba(#3c82f6, 0.8)};
+  --gld-blue-transparent--090: #{rgba(#3c82f6, 0.9)};
+  --gld-green: #12b981;
+  --gld-green-transparent--005: #{rgba(#12b981, 0.05)};
+  --gld-green-transparent--010: #{rgba(#12b981, 0.1)};
+  --gld-green-transparent--020: #{rgba(#12b981, 0.2)};
+  --gld-green-transparent--030: #{rgba(#12b981, 0.3)};
+  --gld-green-transparent--040: #{rgba(#12b981, 0.4)};
+  --gld-green-transparent--050: #{rgba(#12b981, 0.5)};
+  --gld-green-transparent--060: #{rgba(#12b981, 0.6)};
+  --gld-green-transparent--070: #{rgba(#12b981, 0.7)};
+  --gld-green-transparent--080: #{rgba(#12b981, 0.8)};
+  --gld-green-transparent--090: #{rgba(#12b981, 0.9)};
+  --gld-purple: #a855f7;
+  --gld-purple-transparent--005: #{rgba(#a855f7, 0.05)};
+  --gld-purple-transparent--010: #{rgba(#a855f7, 0.1)};
+  --gld-purple-transparent--020: #{rgba(#a855f7, 0.2)};
+  --gld-purple-transparent--030: #{rgba(#a855f7, 0.3)};
+  --gld-purple-transparent--040: #{rgba(#a855f7, 0.4)};
+  --gld-purple-transparent--050: #{rgba(#a855f7, 0.5)};
+  --gld-purple-transparent--060: #{rgba(#a855f7, 0.6)};
+  --gld-purple-transparent--070: #{rgba(#a855f7, 0.7)};
+  --gld-purple-transparent--080: #{rgba(#a855f7, 0.8)};
+  --gld-purple-transparent--090: #{rgba(#a855f7, 0.9)};
+  --gld-mustard: #ebb305;
+  --gld-mustard-transparent--005: #{rgba(#ebb305, 0.05)};
+  --gld-mustard-transparent--010: #{rgba(#ebb305, 0.1)};
+  --gld-mustard-transparent--020: #{rgba(#ebb305, 0.2)};
+  --gld-mustard-transparent--030: #{rgba(#ebb305, 0.3)};
+  --gld-mustard-transparent--040: #{rgba(#ebb305, 0.4)};
+  --gld-mustard-transparent--050: #{rgba(#ebb305, 0.5)};
+  --gld-mustard-transparent--060: #{rgba(#ebb305, 0.6)};
+  --gld-mustard-transparent--070: #{rgba(#ebb305, 0.7)};
+  --gld-mustard-transparent--080: #{rgba(#ebb305, 0.8)};
+  --gld-mustard-transparent--090: #{rgba(#ebb305, 0.9)};
+  --gld-orange: #f97315;
+  --gld-orange-transparent--005: #{rgba(#f97315, 0.05)};
+  --gld-orange-transparent--010: #{rgba(#f97315, 0.1)};
+  --gld-orange-transparent--020: #{rgba(#f97315, 0.2)};
+  --gld-orange-transparent--030: #{rgba(#f97315, 0.3)};
+  --gld-orange-transparent--040: #{rgba(#f97315, 0.4)};
+  --gld-orange-transparent--050: #{rgba(#f97315, 0.5)};
+  --gld-orange-transparent--060: #{rgba(#f97315, 0.6)};
+  --gld-orange-transparent--070: #{rgba(#f97315, 0.7)};
+  --gld-orange-transparent--080: #{rgba(#f97315, 0.8)};
+  --gld-orange-transparent--090: #{rgba(#f97315, 0.9)};
+  --gld-pink: #ec4899;
+  --gld-pink-transparent--005: #{rgba(#ec4899, 0.05)};
+  --gld-pink-transparent--010: #{rgba(#ec4899, 0.1)};
+  --gld-pink-transparent--020: #{rgba(#ec4899, 0.2)};
+  --gld-pink-transparent--030: #{rgba(#ec4899, 0.3)};
+  --gld-pink-transparent--040: #{rgba(#ec4899, 0.4)};
+  --gld-pink-transparent--050: #{rgba(#ec4899, 0.5)};
+  --gld-pink-transparent--060: #{rgba(#ec4899, 0.6)};
+  --gld-pink-transparent--070: #{rgba(#ec4899, 0.7)};
+  --gld-pink-transparent--080: #{rgba(#ec4899, 0.8)};
+  --gld-pink-transparent--090: #{rgba(#ec4899, 0.9)};
+  --gld-gray: #c1c7e1;
+  --gld-gray-transparent--010: #{rgba(#c1c7e1, 0.1)};
+  --gld-gray-transparent--020: #{rgba(#c1c7e1, 0.2)};
+  --gld-gray-transparent--030: #{rgba(#c1c7e1, 0.3)};
+  --gld-gray-transparent--040: #{rgba(#c1c7e1, 0.4)};
+  --gld-gray-transparent--050: #{rgba(#c1c7e1, 0.5)};
+  --gld-gray-transparent--060: #{rgba(#c1c7e1, 0.6)};
+  --gld-gray-transparent--070: #{rgba(#c1c7e1, 0.7)};
+  --gld-gray-transparent--080: #{rgba(#c1c7e1, 0.8)};
+  --gld-gray-transparent--090: #{rgba(#c1c7e1, 0.9)};
+  --gld-white: #fff;
+  --gld-whitelight: #f9fafb;
+  --gld-whitelight-transparent--010: #{rgba(#f9fafb, 0.1)};
+  --gld-whitelight-transparent--020: #{rgba(#f9fafb, 0.2)};
+  --gld-whitelight-transparent--030: #{rgba(#f9fafb, 0.3)};
+  --gld-whitelight-transparent--040: #{rgba(#f9fafb, 0.4)};
+  --gld-whitelight-transparent--050: #{rgba(#f9fafb, 0.5)};
+  --gld-whitelight-transparent--060: #{rgba(#f9fafb, 0.6)};
+  --gld-whitelight-transparent--070: #{rgba(#f9fafb, 0.7)};
+  --gld-whitelight-transparent--080: #{rgba(#f9fafb, 0.8)};
+  --gld-whitelight-transparent--090: #{rgba(#f9fafb, 0.9)};
+  --gld-darkblue: #101827;
+  --gld-darkblue-transparent--010: #{rgba(#101827, 0.1)};
+  --gld-darkblue-transparent--020: #{rgba(#101827, 0.2)};
+  --gld-darkblue-transparent--030: #{rgba(#101827, 0.3)};
+  --gld-darkblue-transparent--040: #{rgba(#101827, 0.4)};
+  --gld-darkblue-transparent--050: #{rgba(#101827, 0.5)};
+  --gld-darkblue-transparent--060: #{rgba(#101827, 0.6)};
+  --gld-darkblue-transparent--070: #{rgba(#101827, 0.7)};
+  --gld-darkblue-transparent--080: #{rgba(#101827, 0.8)};
+  --gld-darkblue-transparent--090: #{rgba(#101827, 0.9)};
+
+  // Borders
+  --gld-border-size: 1px;
+
+  // Animations
+  --gld-animation-time--150: 150ms;
+  --gld-animation-time--250: 250ms;
+  --gld-animation-time--10s: 10s;
+
+  // General
+  --gld-line-height: 1.2;
+  --gld-max-width: 1280px;
+  --gld-navbar-height: 50px;
+  --gld-sidebar-width: 250px;
+}