linkedunion-design-kit 0.1.3 → 0.1.4

package/dist/utils/index.js

@@ -148,6 +148,7 @@ export var sizes = [
     { key: 'lu-size-2500', label: 'lu-size-2500: 200px' }
 ];
 export var widths = [
+    { key: 'lu-width-5', label: 'lu-width-5: 5%' },
     { key: 'lu-width-10', label: 'lu-width-10: 10%' },
     { key: 'lu-width-25', label: 'lu-width-25: 25%' },
     { key: 'lu-width-50', label: 'lu-width-50: 50%' },
@@ -155,12 +156,41 @@ export var widths = [
     { key: 'lu-width-100', label: 'lu-width-100: 100%' }
 ];
 export var heights = [
+    { key: 'lu-height-5', label: 'lu-height-5: 5%' },
     { key: 'lu-height-10', label: 'lu-height-10: 10%' },
     { key: 'lu-height-25', label: 'lu-height-25: 25%' },
     { key: 'lu-height-50', label: 'lu-height-50: 50%' },
     { key: 'lu-height-75', label: 'lu-height-75: 75%' },
     { key: 'lu-height-100', label: 'lu-height-100: 100%' }
 ];
+export var minWidths = [
+    { key: 'lu-min-width-100', label: 'lu-min-width-100: 8px' },
+    { key: 'lu-min-width-200', label: 'lu-min-width-200: 16px' },
+    { key: 'lu-min-width-300', label: 'lu-min-width-300: 24px' },
+    { key: 'lu-min-width-400', label: 'lu-min-width-400: 32px' },
+    { key: 'lu-min-width-500', label: 'lu-min-width-500: 40px' },
+    { key: 'lu-min-width-600', label: 'lu-min-width-600: 48px' },
+    { key: 'lu-min-width-800', label: 'lu-min-width-800: 64px' },
+    { key: 'lu-min-width-1000', label: 'lu-min-width-1000: 80px' },
+    { key: 'lu-min-width-1500', label: 'lu-min-width-1500: 120px' },
+    { key: 'lu-min-width-2000', label: 'lu-min-width-2000: 160px' },
+    { key: 'lu-min-width-2500', label: 'lu-min-width-2500: 200px' },
+    { key: 'lu-min-width-3000', label: 'lu-min-width-3000: 240px' },
+];
+export var minHeights = [
+    { key: 'lu-min-height-100', label: 'lu-min-height-100: 8px' },
+    { key: 'lu-min-height-200', label: 'lu-min-height-200: 16px' },
+    { key: 'lu-min-height-300', label: 'lu-min-height-300: 24px' },
+    { key: 'lu-min-height-400', label: 'lu-min-height-400: 32px' },
+    { key: 'lu-min-height-500', label: 'lu-min-height-500: 40px' },
+    { key: 'lu-min-height-600', label: 'lu-min-height-600: 48px' },
+    { key: 'lu-min-height-800', label: 'lu-min-height-800: 64px' },
+    { key: 'lu-min-height-1000', label: 'lu-min-height-1000: 80px' },
+    { key: 'lu-min-height-1500', label: 'lu-min-height-1500: 120px' },
+    { key: 'lu-min-height-2000', label: 'lu-min-height-2000: 160px' },
+    { key: 'lu-min-height-2500', label: 'lu-min-height-2500: 200px' },
+    { key: 'lu-min-height-3000', label: 'lu-min-height-3000: 240px' },
+];
 export var spacings = [
     { key: 'lu-space-0', label: 'lu-space-0: 0px' },
     { key: 'lu-space-050', label: 'lu-space-050: 4px' },
@@ -179,6 +209,115 @@ export var spacings = [
     { key: 'lu-space-2500', label: 'lu-space-2500: 200px' },
     { key: 'lu-space-3000', label: 'lu-space-3000: 240px' }
 ];
+export var borderRadiusList = [
+    { key: 'lu-border-rounded-none', label: 'lu-border-rounded-none: 0px' },
+    { key: 'lu-border-rounded-xs', label: 'lu-border-rounded-xs: 2px' },
+    { key: 'lu-border-rounded-sm', label: 'lu-border-rounded-sm: 4px' },
+    { key: 'lu-border-rounded-md', label: 'lu-border-rounded-md: 6px' },
+    { key: 'lu-border-rounded-lg', label: 'lu-border-rounded-lg: 8px' },
+    { key: 'lu-border-rounded-xl', label: 'lu-border-rounded-xl: 12px' },
+    { key: 'lu-border-rounded-2xl', label: 'lu-border-rounded-2xl: 16px' },
+    { key: 'lu-border-rounded-3xl', label: 'lu-border-rounded-3xl: 24px' },
+    { key: 'lu-border-rounded-full', label: 'lu-border-rounded-full: 9999px' },
+];
+export var borderWidthList = [
+    { key: 'lu-border-width-125', label: 'lu-border-width-125: 1px' },
+    { key: 'lu-border-width-025', label: 'lu-border-width-025: 2px' },
+    { key: 'lu-border-width-050', label: 'lu-border-width-050: 4px' },
+    { key: 'lu-border-width-100', label: 'lu-border-width-100: 8px' },
+];
+export var iconSizeList = [
+    { key: 'lu-icon-xx-small', label: 'lu-icon-xx-small: 8px' },
+    { key: 'lu-icon-x-small', label: 'lu-icon-x-small: 12px' },
+    { key: 'lu-icon-small', label: 'lu-icon-small: 14px' },
+    { key: 'lu-icon-medium', label: 'lu-icon-medium: 16px' },
+    { key: 'lu-icon-large', label: 'lu-icon-large: 18px' },
+    { key: 'lu-icon-x-large', label: 'lu-icon-x-large: 20px' },
+    { key: 'lu-icon-2x-large', label: 'lu-icon-2x-large: 24px' },
+    { key: 'lu-icon-3x-large', label: 'lu-icon-3x-large: 28px' },
+    { key: 'lu-icon-4x-large', label: 'lu-icon-4x-large: 32px' },
+    { key: 'lu-icon-5x-large', label: 'lu-icon-5x-large: 36px' },
+    { key: 'lu-icon-6x-large', label: 'lu-icon-6x-large: 40px' },
+    { key: 'lu-icon-7x-large', label: 'lu-icon-7x-large: 48px' },
+    { key: 'lu-icon-huge', label: 'lu-icon-huge: 64px' },
+    { key: 'lu-icon-massive', label: 'lu-icon-massive: 80px' },
+];
+export var buttonIconSizeList = [
+    { key: 'lu-icon-xx-small', label: 'lu-icon-xx-small: 8px' },
+    { key: 'lu-icon-x-small', label: 'lu-icon-x-small: 12px' },
+    { key: 'lu-icon-small', label: 'lu-icon-small: 14px' },
+    { key: 'lu-icon-medium', label: 'lu-icon-medium: 16px' },
+    { key: 'lu-icon-large', label: 'lu-icon-large: 18px' },
+    { key: 'lu-icon-x-large', label: 'lu-icon-x-large: 20px' },
+];
+export var iconColorList = [
+    { key: 'lu-disabled-icon-light', label: 'lu-disabled-icon-light: #D2D3D5' },
+    { key: 'lu-disabled-icon-dark', label: 'lu-disabled-icon-dark: #9DA1A5' },
+    { key: 'lu-primary-icon-default', label: 'lu-primary-icon-default: #276AB3' },
+    { key: 'lu-primary-icon-midtone', label: 'lu-primary-icon-midtone: #E2EDF9' },
+    { key: 'lu-primary-icon-light', label: 'lu-primary-icon-light: #FBFCFE' },
+    { key: 'lu-success-icon-default', label: 'lu-success-icon-default: #198653' },
+    { key: 'lu-success-icon-midtone', label: 'lu-success-icon-midtone: #D1E7DD' },
+    { key: 'lu-success-icon-light', label: 'lu-success-icon-light: #FCFDFC' },
+    { key: 'lu-warning-icon-default', label: 'lu-warning-icon-default: #FFD333' },
+    { key: 'lu-warning-icon-midtone', label: 'lu-warning-icon-midtone: #FFF4CC' },
+    { key: 'lu-warning-icon-dark', label: 'lu-warning-icon-dark: #473800' },
+    { key: 'lu-danger-icon-default', label: 'lu-danger-icon-default: #E0061B' },
+    { key: 'lu-danger-icon-midtone', label: 'lu-danger-icon-midtone: #FFF0F1' },
+    { key: 'lu-danger-icon-light', label: 'lu-danger-icon-light: #FFFAFA' },
+    { key: 'lu-info-icon-default', label: 'lu-info-icon-default: #6249DE' },
+    { key: 'lu-info-icon-midtone', label: 'lu-info-icon-midtone: #ECE9FB' },
+    { key: 'lu-info-icon-light', label: 'lu-info-icon-light: #FBFBFE' },
+    { key: 'lu-neutral-icon-light', label: 'lu-neutral-icon-light: #FAFAFA' },
+    { key: 'lu-neutral-icon-dark', label: 'lu-neutral-icon-dark: #070808' }
+];
+export var buttonColorsList = [
+    { key: 'lu-btn-primary', label: 'lu-btn-primary' },
+    { key: 'lu-btn-primary-light', label: 'lu-btn-primary-light' },
+    { key: 'lu-btn-success', label: 'lu-btn-success' },
+    { key: 'lu-btn-success-light', label: 'lu-btn-success-light' },
+    { key: 'lu-btn-warning', label: 'lu-btn-warning' },
+    { key: 'lu-btn-warning-light', label: 'lu-btn-warning-light' },
+    { key: 'lu-btn-danger', label: 'lu-btn-danger' },
+    { key: 'lu-btn-danger-light', label: 'lu-btn-danger-light' },
+    { key: 'lu-btn-info', label: 'lu-btn-info' },
+    { key: 'lu-btn-info-light', label: 'lu-btn-info-light' },
+    { key: 'lu-btn-gray', label: 'lu-btn-gray' },
+    { key: 'lu-btn-gray-light', label: 'lu-btn-gray-light' },
+    { key: 'lu-btn-disabled', label: 'lu-btn-disabled' },
+];
+export var butttonSizeList = [
+    { key: 'lu-btn-sm', label: 'lu-btn-sm' },
+    { key: 'lu-btn-md', label: 'lu-btn-md' },
+    { key: 'lu-btn-lg', label: 'lu-btn-lg' },
+    { key: 'lu-btn-xl', label: 'lu-btn-xl' },
+];
+export var buttonWithIconList = [
+    { key: 'lu-btn-sm', label: 'lu-btn-sm' },
+    { key: 'lu-btn-md', label: 'lu-btn-md' },
+    { key: 'lu-btn-lg', label: 'lu-btn-lg' },
+    { key: 'lu-btn-xl', label: 'lu-btn-xl' },
+];
+export var portraitaspectRatioList = [
+    { key: 'lu-aspect-square', label: 'lu-aspect-square: 1/1' },
+    { key: 'lu-aspect-1-2-por', label: 'lu-aspect-1-2-por: 1/2' },
+    { key: 'lu-aspect-2-3-por', label: 'lu-aspect-2-3-por: 2/3' },
+    { key: 'lu-aspect-3-4-por', label: 'lu-aspect-3-4-por: 3/4' },
+    { key: 'lu-aspect-4-5-por', label: 'lu-aspect-4-5-por: 4/5' },
+    { key: 'lu-aspect-5-7-por', label: 'lu-aspect-5-7-por: 5/7' },
+    { key: 'lu-aspect-9-16-por', label: 'lu-aspect-9-16-por: 9/16' },
+    { key: 'lu-aspect-9-21-por', label: 'lu-aspect-9-21-por: 9/21' }
+];
+export var landscapeaspectRatioList = [
+    { key: 'lu-aspect-square', label: 'lu-aspect-square: 1/1' },
+    { key: 'lu-aspect-2-1-landsc', label: 'lu-aspect-2-1-landsc: 2/1' },
+    { key: 'lu-aspect-3-2-landsc', label: 'lu-aspect-3-2-landsc: 3/2' },
+    { key: 'lu-aspect-4-3-landsc', label: 'lu-aspect-4-3-landsc: 4/3' },
+    { key: 'lu-aspect-5-4-landsc', label: 'lu-aspect-5-4-landsc: 5/4' },
+    { key: 'lu-aspect-7-5-landsc', label: 'lu-aspect-7-5-landsc: 7/5' },
+    { key: 'lu-aspect-16-9-landsc', label: 'lu-aspect-16-9-landsc: 16/9' },
+    { key: 'lu-aspect-21-9-landscape', label: 'lu-aspect-21-9-landscape: 21/9' },
+];
 //Plugin for generating utilities (Used in tailwind.config.js)
 export default function generateUtilities(property, theme) {
     var utilities = theme(property);
@@ -273,19 +412,19 @@ export var customColors = {
     },
 };
 export var customFontSize = {
-    'lu-base-font-size': '16px',
-    'lu-font-size-x-small': '12px',
-    'lu-font-size-small': '14px',
-    'lu-font-size-medium': '16px',
-    'lu-font-size-large': '18px',
-    'lu-font-size-x-large': '20px',
-    'lu-font-size-2x-large': '24px',
-    'lu-font-size-3x-large': '28px',
-    'lu-font-size-4x-large': '32px',
-    'lu-font-size-5x-large': '36px',
-    'lu-font-size-6x-large': '40px',
-    'lu-font-size-7x-large': '48px',
-    'lu-font-size-huge': '64px',
+    'lu-base-font-size': 'var(--core-200)',
+    'lu-font-size-x-small': 'var(--core-150)',
+    'lu-font-size-small': 'var(--core-175)',
+    'lu-font-size-medium': 'var(--core-200)',
+    'lu-font-size-large': 'var(--core-225)',
+    'lu-font-size-x-large': 'var(--core-250)',
+    'lu-font-size-2x-large': 'var(--core-300)',
+    'lu-font-size-3x-large': 'var(--core-350)',
+    'lu-font-size-4x-large': 'var(--core-400)',
+    'lu-font-size-5x-large': 'var(--core-450)',
+    'lu-font-size-6x-large': 'var(--core-500)',
+    'lu-font-size-7x-large': 'var(--core-600)',
+    'lu-font-size-huge': 'var(--core-800)',
 };
 export var customFontWeight = {
     'lu-font-weight-thin': '100',
@@ -326,20 +465,21 @@ export var customTextWrap = {
     'lu-text-nowrap': 'nowrap',
 };
 export var customSize = {
-    'lu-size-050': '4px',
-    'lu-size-100': '8px',
-    'lu-size-200': '16px',
-    'lu-size-300': '24px',
-    'lu-size-400': '32px',
-    'lu-size-500': '40px',
-    'lu-size-600': '48px',
-    'lu-size-800': '64px',
-    'lu-size-1000': '80px',
-    'lu-size-1500': '120px',
-    'lu-size-2000': '160px',
-    'lu-size-2500': '200px',
+    'lu-size-050': 'var(--core-050)',
+    'lu-size-100': 'var(--core-100)',
+    'lu-size-200': 'var(--core-200)',
+    'lu-size-300': 'var(--core-300)',
+    'lu-size-400': 'var(--core-400)',
+    'lu-size-500': 'var(--core-500)',
+    'lu-size-600': 'var(--core-600)',
+    'lu-size-800': 'var(--core-800)',
+    'lu-size-1000': 'var(--core-1000)',
+    'lu-size-1500': 'var(--core-1500)',
+    'lu-size-2000': 'var(--core-2000)',
+    'lu-size-2500': 'var(--core-2500)',
 };
 export var customWidth = {
+    'lu-width-5': '5%',
     'lu-width-10': '10%',
     'lu-width-25': '25%',
     'lu-width-50': '50%',
@@ -347,6 +487,7 @@ export var customWidth = {
     'lu-width-100': '100%'
 };
 export var customHeight = {
+    'lu-height-5': '5%',
     'lu-height-10': '10%',
     'lu-height-25': '25%',
     'lu-height-50': '50%',
@@ -354,49 +495,121 @@ export var customHeight = {
     'lu-height-100': '100%'
 };
 export var customMinWidth = {
-    'lu-min-width-400': '32px',
-    'lu-min-width-500': '40px',
-    'lu-min-width-600': '48px',
-    'lu-min-width-800': '64px',
-    'lu-min-width-1000': '80px',
-    'lu-min-width-1500': '120px',
-    'lu-min-width-2000': '160px',
-    'lu-min-width-2500': '200px',
-    'lu-min-width-3000': '240px',
+    'lu-min-width-100': 'var(--core-100)',
+    'lu-min-width-200': 'var(--core-200)',
+    'lu-min-width-300': 'var(--core-300)',
+    'lu-min-width-400': 'var(--core-400)',
+    'lu-min-width-500': 'var(--core-500)',
+    'lu-min-width-600': 'var(--core-600)',
+    'lu-min-width-800': 'var(--core-800)',
+    'lu-min-width-1000': 'var(--core-1000)',
+    'lu-min-width-1500': 'var(--core-1500)',
+    'lu-min-width-2000': 'var(--core-2000)',
+    'lu-min-width-2500': 'var(--core-2500)',
+    'lu-min-width-3000': 'var(--core-3000)',
 };
 export var customMinHeight = {
-    'lu-min-height-400': '32px',
-    'lu-min-height-500': '40px',
-    'lu-min-height-600': '48px',
-    'lu-min-height-800': '64px',
-    'lu-min-height-1000': '80px',
-    'lu-min-height-1500': '120px',
-    'lu-min-height-2000': '160px',
-    'lu-min-height-2500': '200px',
-    'lu-min-height-3000': '240px',
+    'lu-min-height-100': 'var(--core-100)',
+    'lu-min-height-200': 'var(--core-200)',
+    'lu-min-height-300': 'var(--core-300)',
+    'lu-min-height-400': 'var(--core-400)',
+    'lu-min-height-500': 'var(--core-500)',
+    'lu-min-height-600': 'var(--core-600)',
+    'lu-min-height-800': 'var(--core-800)',
+    'lu-min-height-1000': 'var(--core-1000)',
+    'lu-min-height-1500': 'var(--core-1500)',
+    'lu-min-height-2000': 'var(--core-2000)',
+    'lu-min-height-2500': 'var(--core-2500)',
+    'lu-min-height-3000': 'var(--core-3000)',
 };
 export var customLogoSize = {
     'lu-primary-logo': '75px',
-    'lu-secondary-logo': '32px',
-    'lu-favicon-logo': '32px'
+    'lu-secondary-logo': 'var(--core-400)',
+    'lu-favicon-logo': 'var(--core-400)'
 };
-export var customSpacing = {
-    'lu-space-0': '0px',
-    'lu-space-050': '4px',
-    'lu-space-100': '8px',
-    'lu-space-150': '12px',
-    'lu-space-200': '16px',
-    'lu-space-250': '20px',
-    'lu-space-300': '24px',
-    'lu-space-400': '32px',
-    'lu-space-500': '40px',
-    'lu-space-600': '48px',
-    'lu-space-800': '64px',
-    'lu-space-1000': '80px',
-    'lu-space-1500': '120px',
-    'lu-space-2000': '160px',
-    'lu-space-2500': '200px',
-    'lu-space-3000': '240px'
+export var customIconSize = {
+    '.lu-icon-xx-small': {
+        width: 'var(--core-100)',
+        height: 'var(--core-100)',
+    },
+    '.lu-icon-x-small': {
+        width: 'var(--core-150)',
+        height: 'var(--core-150)',
+    },
+    '.lu-icon-small': {
+        width: 'var(--core-175)',
+        height: 'var(--core-175)',
+    },
+    '.lu-icon-medium': {
+        width: 'var(--core-200)',
+        height: 'var(--core-200)',
+    },
+    '.lu-icon-large': {
+        width: 'var(--core-225)',
+        height: 'var(--core-225)',
+    },
+    '.lu-icon-x-large': {
+        width: 'var(--core-250)',
+        height: 'var(--core-250)',
+    },
+    '.lu-icon-2x-large': {
+        width: 'var(--core-300)',
+        height: 'var(--core-300)',
+    },
+    '.lu-icon-3x-large': {
+        width: 'var(--core-350)',
+        height: 'var(--core-350)',
+    },
+    '.lu-icon-4x-large': {
+        width: 'var(--core-400)',
+        height: 'var(--core-400)',
+    },
+    '.lu-icon-5x-large': {
+        width: 'var(--core-450)',
+        height: 'var(--core-450)',
+    },
+    '.lu-icon-6x-large': {
+        width: 'var(--core-500)',
+        height: 'var(--core-500)',
+    },
+    '.lu-icon-7x-large': {
+        width: 'var(--core-600)',
+        height: 'var(--core-600)',
+    },
+    '.lu-icon-huge': {
+        width: 'var(--core-800)',
+        height: 'var(--core-800)',
+    },
+    '.lu-icon-massive': {
+        width: 'var(--core-1000)',
+        height: 'var(--core-1000)',
+    },
+};
+export var customButtonIconSize = {
+    '.lu-icon-xx-small': {
+        width: 'var(--core-100)',
+        height: 'var(--core-100)',
+    },
+    '.lu-icon-x-small': {
+        width: 'var(--core-150)',
+        height: 'var(--core-150)',
+    },
+    '.lu-icon-small': {
+        width: 'var(--core-175)',
+        height: 'var(--core-175)',
+    },
+    '.lu-icon-medium': {
+        width: 'var(--core-200)',
+        height: 'var(--core-200)',
+    },
+    '.lu-icon-large': {
+        width: 'var(--core-225)',
+        height: 'var(--core-225)',
+    },
+    '.lu-icon-x-large': {
+        width: 'var(--core-250)',
+        height: 'var(--core-250)',
+    },
 };
 export var customOpacity = {
     'lu-opacity-0': '0.0',
@@ -417,38 +630,38 @@ export var customOpacity = {
     'lu-opacity-100': '1',
 };
 export var customBorderWidth = {
-    'lu-border-width-0125': '1px',
-    'lu-border-width-025': '2px',
-    'lu-border-width-050': '4px',
-    'lu-border-width-100': '8px',
+    '.lu-border-width-025': { borderWidth: 'var(--core-025)' },
+    '.lu-border-width-050': { borderWidth: 'var(--core-050)' },
+    '.lu-border-width-100': { borderWidth: 'var(--core-100)' },
+    '.lu-border-width-125': { borderWidth: 'var(--core-125)' },
 };
 export var customBorderRadius = {
-    'lu-border-rounded-none': '0px',
-    'lu-border-rounded-xs': '2px',
-    'lu-border-rounded-sm': '4px',
-    'lu-border-rounded-md': '6px',
-    'lu-border-rounded-lg': '8px',
-    'lu-border-rounded-xl': '12px',
-    'lu-border-rounded-2xl': '16px',
-    'lu-border-rounded-3xl': '24px',
-    'lu-border-rounded-full': '9999px',
+    '.lu-border-rounded-none': { borderRadius: 'var(--core-0)' },
+    '.lu-border-rounded-xs': { borderRadius: 'var(--core-025)' },
+    '.lu-border-rounded-sm': { borderRadius: 'var(--core-050)' },
+    '.lu-border-rounded-md': { borderRadius: 'var(--core-075)' },
+    '.lu-border-rounded-lg': { borderRadius: 'var(--core-100)' },
+    '.lu-border-rounded-xl': { borderRadius: 'var(--core-150)' },
+    '.lu-border-rounded-2xl': { borderRadius: 'var(--core-200)' },
+    '.lu-border-rounded-3xl': { borderRadius: 'var(--core-300)' },
+    '.lu-border-rounded-full': { borderRadius: '9999px' },
 };
 export var customAspectRatio = {
-    'lu-aspect-square': '1 / 1',
-    'lu-aspect-2/1-landsc': '2 / 1',
-    'lu-aspect-1/2-por': '1 / 2',
-    'lu-aspect-3/2-landsc': '3 / 2',
-    'lu-aspect-2/3-por': '2 / 3',
-    'lu-aspect-4/3-landsc': '4/3',
-    'lu-aspect-3/4-por': '3 / 4',
-    'lu-aspect-5/4-landsc': '5 / 4',
-    'lu-aspect-4/5-por': '4 / 5',
-    'lu-aspect-7/5-landsc': '7 / 5',
-    'lu-aspect-5/7-por': '5 / 7',
-    'lu-aspect-16/9-landsc': '16 / 9',
-    'lu-aspect-9/16-por': '9 / 16',
-    'lu-aspect-21/9-landscape': '21 / 9',
-    'lu-aspect-9/21-por': '9 / 21',
+    '.lu-aspect-square': { aspectRatio: '1 / 1' },
+    '.lu-aspect-2-1-landsc': { aspectRatio: '2 / 1' },
+    '.lu-aspect-1-2-por': { aspectRatio: '1 / 2' },
+    '.lu-aspect-3-2-landsc': { aspectRatio: '3 / 2' },
+    '.lu-aspect-2-3-por': { aspectRatio: '2 / 3' },
+    '.lu-aspect-4-3-landsc': { aspectRatio: '4 / 3' },
+    '.lu-aspect-3-4-por': { aspectRatio: '3 / 4' },
+    '.lu-aspect-5-4-landsc': { aspectRatio: '5 / 4' },
+    '.lu-aspect-4-5-por': { aspectRatio: '4 / 5' },
+    '.lu-aspect-7-5-landsc': { aspectRatio: '7 / 5' },
+    '.lu-aspect-5-7-por': { aspectRatio: '5 / 7' },
+    '.lu-aspect-16-9-landsc': { aspectRatio: '16 / 9' },
+    '.lu-aspect-9-16-por': { aspectRatio: '9 / 16' },
+    '.lu-aspect-21-9-landscape': { aspectRatio: '21 / 9' },
+    '.lu-aspect-9-21-por': { aspectRatio: '9 / 21' },
 };
 export var customBoxShadow = {
     'lu-shadow-xs': '0px 4px 4px 0 rgba(52, 52, 52, 0.05)',
@@ -457,3 +670,827 @@ export var customBoxShadow = {
     'lu-shadow-lg': '0px 4px 18px 0 rgba(52, 52, 52, 0.15)',
     'lu-shadow-xl': '0px 8px 24px 0 rgba(52, 52, 52, 0.15)',
 };
+export var customIconColors = {
+    '.lu-disabled-icon-light': { fill: '#D2D3D5' },
+    '.lu-disabled-icon-dark': { fill: 'var(--neutral-400)' },
+    '.lu-primary-icon-default': { fill: 'var( --primary-600)' },
+    '.lu-primary-icon-midtone': { fill: 'var(--primary-100)' },
+    '.lu-primary-icon-light': { fill: 'var(--primary-0)' },
+    '.lu-success-icon-default': { fill: 'var(--success-600)' },
+    '.lu-success-icon-midtone': { fill: 'var(--success-200)' },
+    '.lu-success-icon-light': { fill: 'var(--success-0)' },
+    '.lu-warning-icon-default': { fill: 'var(--warning-500)' },
+    '.lu-warning-icon-midtone': { fill: 'var(--warning-200)' },
+    '.lu-warning-icon-dark': { fill: 'var(--warning-1000)' },
+    '.lu-danger-icon-default': { fill: 'var(--danger-600)' },
+    '.lu-danger-icon-midtone': { fill: 'var(--danger-100)' },
+    '.lu-danger-icon-light': { fill: 'var(--danger-0)' },
+    '.lu-info-icon-default': { fill: 'var(--info-600)' },
+    '.lu-info-icon-midtone': { fill: 'var(--info-100)' },
+    '.lu-info-icon-light': { fill: 'var(--info-0)' },
+    '.lu-neutral-icon-light': { fill: 'var(--neutral-0)' },
+    '.lu-neutral-icon-dark': { fill: 'var(--neutral-1000)' }
+};
+export var customButtonColors = {
+    '.lu-btn-primary': {
+        color: 'var(--primary-0)',
+        backgroundColor: 'var(--primary-600)',
+        fill: 'var(--primary-0)',
+        '&:hover': {
+            backgroundColor: 'var(--primary-700)',
+            color: 'var(--primary-0)',
+            fill: 'var(--primary-0)',
+            '.icon': {
+                color: 'var(--primary-0)',
+                fill: 'var(--primary-0)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--primary-600)',
+            color: 'var(--primary-0)',
+            fill: 'var(--primary-0)',
+        },
+        '&:active': {
+            backgroundColor: 'var(--primary-800)',
+            color: 'var(--primary-0)',
+            fill: 'var(--primary-0)',
+        }
+    },
+    '.lu-btn-primary-light': {
+        color: 'var(--primary-600)',
+        backgroundColor: 'var(--primary-100)',
+        fill: 'var(--primary-600)',
+        '&:hover': {
+            backgroundColor: 'var(--primary-700)',
+            color: 'var(--primary-0)',
+            fill: 'var(--primary-0)',
+            '.icon': {
+                color: 'var(--primary-0)',
+                fill: 'var(--primary-0)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--primary-600)',
+            color: 'var(--primary-0)',
+            fill: 'var(--primary-0)',
+            '.icon': {
+                color: 'var(--primary-0)',
+                fill: 'var(--primary-0)',
+            }
+        },
+        '&:active': {
+            backgroundColor: 'var(--primary-800)',
+            color: 'var(--primary-0)',
+            fill: 'var(--primary-0)',
+            '.icon': {
+                color: 'var(--primary-0)',
+                fill: 'var(--primary-0)',
+            }
+        }
+    },
+    '.lu-btn-success': {
+        color: 'var(--success-0)',
+        backgroundColor: 'var(--success-600)',
+        fill: 'var(--success-0)',
+        '&:hover': {
+            backgroundColor: 'var(--success-700)',
+            color: 'var(--success-0)',
+            fill: 'var(--success-0)',
+            '.icon': {
+                color: 'var(--success-0)',
+                fill: 'var(--success-0)'
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--success-600)',
+            color: 'var(--success-0)',
+            fill: 'var(--success-0)'
+        },
+        '&:active': {
+            backgroundColor: 'var(--success-800)',
+            color: 'var(--success-0)',
+            fill: 'var(--success-0)',
+        }
+    },
+    '.lu-btn-success-light': {
+        color: 'var(--success-600)',
+        backgroundColor: 'var(--success-100)',
+        fill: 'var(--success-600)',
+        '&:hover': {
+            backgroundColor: 'var(--success-700)',
+            color: 'var(--success-0)',
+            fill: 'var(--success-0)',
+            '.icon': {
+                color: 'var(--success-0)',
+                fill: 'var(--success-0)'
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--success-600)',
+            color: 'var(--success-0)',
+            fill: 'var(--success-0)',
+            '.icon': {
+                color: 'var(--success-0)',
+                fill: 'var(--success-0)'
+            }
+        },
+        '&:active': {
+            backgroundColor: 'var(--success-800)',
+            color: 'var(--success-0)',
+            fill: 'var(--success-0)',
+            '.icon': {
+                color: 'var(--success-0)',
+                fill: 'var(--success-0)'
+            }
+        }
+    },
+    '.lu-btn-warning': {
+        color: 'var(--warning-1000)',
+        backgroundColor: 'var(--warning-500)',
+        fill: 'var(--warning-1000)',
+        '&:hover': {
+            backgroundColor: 'var(--warning-600)',
+            color: 'var(--warning-1000)',
+            fill: 'var(--warning-1000)',
+            '.icon': {
+                color: 'var(--warning-1000)',
+                fill: 'var(--warning-1000)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--warning-500)',
+            color: 'var(--warning-1000)',
+            fill: 'var(--warning-1000)'
+        },
+        '&:active': {
+            backgroundColor: 'var(--warning-700)',
+            color: 'var(--warning-1000)',
+            fill: 'var(--warning-1000)',
+        }
+    },
+    '.lu-btn-warning-light': {
+        color: 'var(--warning-900)',
+        backgroundColor: 'var(--warning-100)',
+        fill: 'var(--warning-900)',
+        '&:hover': {
+            backgroundColor: 'var(--warning-600)',
+            color: 'var(--warning-1000)',
+            fill: 'var(--warning-1000)',
+            '.icon': {
+                color: 'var(--warning-1000)',
+                fill: 'var(--warning-1000)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--warning-500)',
+            color: 'var(--warning-1000)',
+            fill: 'var(--warning-1000)',
+            '.icon': {
+                color: 'var(--warning-1000)',
+                fill: 'var(--warning-1000)',
+            }
+        },
+        '&:active': {
+            backgroundColor: 'var(--warning-700)',
+            color: 'var(--warning-1000)',
+            fill: 'var(--warning-1000)',
+            '.icon': {
+                color: 'var(--warning-1000)',
+                fill: 'var(--warning-1000)',
+            }
+        }
+    },
+    '.lu-btn-danger': {
+        color: 'var(--danger-0)',
+        backgroundColor: 'var(--danger-600)',
+        fill: 'var(--danger-0)',
+        '&:hover': {
+            backgroundColor: 'var(--danger-700)',
+            color: 'var(--danger-0)',
+            fill: 'var(--danger-0)',
+            '.icon': {
+                color: 'var(--danger-0)',
+                fill: 'var(--danger-0)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--danger-600)',
+            color: 'var(--danger-0)',
+            fill: 'var(--danger-0)'
+        },
+        '&:active': {
+            backgroundColor: 'var(--danger-800)',
+            color: 'var(--danger-0)',
+            fill: 'var(--danger-0)',
+        }
+    },
+    '.lu-btn-danger-light': {
+        color: 'var(--danger-600)',
+        backgroundColor: 'var(--danger-100)',
+        fill: 'var(--danger-600)',
+        '&:hover': {
+            backgroundColor: 'var(--danger-700)',
+            color: 'var(--danger-0)',
+            fill: 'var(--danger-0)',
+            '.icon': {
+                color: 'var(--danger-0)',
+                fill: 'var(--danger-0)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--danger-600)',
+            color: 'var(--danger-0)',
+            fill: 'var(--danger-0)',
+            '.icon': {
+                color: 'var(--danger-0)',
+                fill: 'var(--danger-0)'
+            }
+        },
+        '&:active': {
+            backgroundColor: 'var(--danger-800)',
+            color: 'var(--danger-0)',
+            fill: 'var(--danger-0)',
+            '.icon': {
+                color: 'var(--danger-0)',
+                fill: 'var(--danger-0)'
+            }
+        }
+    },
+    '.lu-btn-info': {
+        color: 'var(--info-0)',
+        backgroundColor: 'var(--info-600)',
+        fill: 'var(--info-0)',
+        '&:hover': {
+            backgroundColor: 'var(--info-700)',
+            color: 'var(--info-0)',
+            fill: 'var(--info-0)',
+            '.icon': {
+                color: 'var(--info-0)',
+                fill: 'var(--info-0)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--info-600)',
+            color: 'var(--info-0)',
+            fill: 'var(--info-0)'
+        },
+        '&:active': {
+            backgroundColor: 'var(--info-800)',
+            color: 'var(--info-0)',
+            fill: 'var(--info-0)',
+        }
+    },
+    '.lu-btn-info-light': {
+        color: 'var(--info-600)',
+        backgroundColor: 'var(--info-100)',
+        fill: 'var(--info-600)',
+        '&:hover': {
+            backgroundColor: 'var(--info-700)',
+            color: 'var(--info-0)',
+            fill: 'var(--info-0)',
+            '.icon': {
+                color: 'var(--info-0)',
+                fill: 'var(--info-0)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--info-600)',
+            color: 'var(--info-0)',
+            fill: 'var(--info-0)',
+            '.icon': {
+                color: 'var(--info-0)',
+                fill: 'var(--info-0)',
+            }
+        },
+        '&:active': {
+            backgroundColor: 'var(--info-800)',
+            color: 'var(--info-0)',
+            fill: 'var(--info-0)',
+            '.icon': {
+                color: 'var(--info-0)',
+                fill: 'var(--info-0)',
+            }
+        }
+    },
+    '.lu-btn-gray': {
+        color: 'var(--neutral-1000)',
+        backgroundColor: 'var(--neutral-0)',
+        fill: 'var(--neutral-1000)',
+        '&:hover': {
+            backgroundColor: 'var(--neutral-100)',
+            color: 'var(--neutral-1000)',
+            fill: 'var(--neutral-1000)',
+            '.icon': {
+                color: 'var(--neutral-1000)',
+                fill: 'var(--neutral-1000)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--neutral-0)',
+            color: 'var(--neutral-1000)',
+            fill: 'var(--neutral-1000)'
+        },
+        '&:active': {
+            backgroundColor: 'var(--neutral-300)',
+            color: 'var(--neutral-1000)',
+            fill: 'var(--neutral-1000)',
+        }
+    },
+    '.lu-btn-gray-light': {
+        color: 'var(--neutral-0)',
+        backgroundColor: 'var(--neutral-900)',
+        fill: 'var(--neutral-0)',
+        '&:hover': {
+            backgroundColor: 'var(--neutral-100)',
+            color: 'var(--neutral-1000)',
+            fill: 'var(--neutral-1000)',
+            '.icon': {
+                color: 'var(--neutral-1000)',
+                fill: 'var(--neutral-1000)',
+            }
+        },
+        '&:focus': {
+            backgroundColor: 'var(--neutral-0)',
+            color: 'var(--neutral-1000)',
+            fill: 'var(--neutral-1000)',
+            '.icon': {
+                color: 'var(--neutral-1000)',
+                fill: 'var(--neutral-1000)',
+            }
+        },
+        '&:active': {
+            backgroundColor: 'var(--neutral-300)',
+            color: 'var(--neutral-1000)',
+            fill: 'var(--neutral-1000)',
+            '.icon': {
+                color: 'var(--neutral-1000)',
+                fill: 'var(--neutral-1000)',
+            }
+        }
+    },
+    '.lu-btn-disabled': {
+        color: '#9DA1A5',
+        backgroundColor: '#D2D3D5',
+        fill: '#9DA1A5'
+    }
+};
+export var customButtonOutlineColors = {
+    '.outline-button.lu-btn-primary-light': {
+        color: 'var(--primary-600)',
+        borderColor: 'var(--primary-100) !important',
+        fill: 'var(--primary-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--primary-700) !important',
+            color: 'var(--primary-700)',
+            fill: 'var(--primary-700)',
+            '.icon': {
+                color: 'var(--primary-700)',
+                fill: 'var(--primary-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--primary-600) !important',
+            color: 'var(--primary-600)',
+            fill: 'var(--primary-600)',
+            '.icon': {
+                color: 'var(--primary-600)',
+                fill: 'var(--primary-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--primary-800) !important',
+            color: 'var(--primary-800)',
+            fill: 'var(--primary-800)',
+            '.icon': {
+                color: 'var(--primary-800)',
+                fill: 'var(--primary-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-primary': {
+        color: 'var(--primary-600)',
+        borderColor: 'var(--primary-600)',
+        fill: 'var(--primary-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--primary-700)',
+            color: 'var(--primary-700)',
+            fill: 'var(--primary-700)',
+            '.icon': {
+                color: 'var(--primary-700)',
+                fill: 'var(--primary-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--primary-600)',
+            color: 'var(--primary-600)',
+            fill: 'var(--primary-600)',
+            '.icon': {
+                color: 'var(--primary-600)',
+                fill: 'var(--primary-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--primary-800)',
+            color: 'var(--primary-800)',
+            fill: 'var(--primary-800)',
+            '.icon': {
+                color: 'var(--primary-800)',
+                fill: 'var(--primary-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-success': {
+        color: 'var(--success-600)',
+        borderColor: 'var(--success-600)',
+        fill: 'var(--success-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--success-700)',
+            color: 'var(--success-700)',
+            fill: 'var(--success-700)',
+            '.icon': {
+                color: 'var(--success-700)',
+                fill: 'var(--success-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--success-600)',
+            color: 'var(--success-600)',
+            fill: 'var(--success-600)',
+            '.icon': {
+                color: 'var(--success-600)',
+                fill: 'var(--success-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--success-800)',
+            color: 'var(--success-800)',
+            fill: 'var(--success-800)',
+            '.icon': {
+                color: 'var(--success-800)',
+                fill: 'var(--success-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-success-light': {
+        color: 'var(--success-600)',
+        borderColor: 'var(--success-100) !important',
+        fill: 'var(--success-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--success-700) !important',
+            color: 'var(--success-700)',
+            fill: 'var(--success-700)',
+            '.icon': {
+                color: 'var(--success-700)',
+                fill: 'var(--success-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--success-600) !important',
+            color: 'var(--success-600)',
+            fill: 'var(--success-600)',
+            '.icon': {
+                color: 'var(--success-600)',
+                fill: 'var(--success-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--success-800) !important',
+            color: 'var(--success-800)',
+            fill: 'var(--success-800)',
+            '.icon': {
+                color: 'var(--success-800)',
+                fill: 'var(--success-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-warning': {
+        color: 'var(--warning-500)',
+        borderColor: 'var(--warning-500)',
+        fill: 'var(--warning-500)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--warning-600)',
+            color: 'var(--warning-600)',
+            fill: 'var(--warning-600)',
+            '.icon': {
+                fill: 'var(--warning-600)',
+                color: 'var(--warning-600)',
+            },
+        },
+        '&:focus': {
+            borderColor: 'var(--warning-500)',
+            color: 'var(--warning-500)',
+            fill: 'var(--warning-500)',
+            '.icon': {
+                color: 'var(--warning-500)',
+                fill: 'var(--warning-500)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--warning-700)',
+            color: 'var(--warning-700)',
+            fill: 'var(--warning-700)',
+            '.icon': {
+                color: 'var(--warning-700)',
+                fill: 'var(--warning-700)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-warning-light': {
+        color: 'var(--warning-500)',
+        borderColor: 'var(--warning-100) !important',
+        fill: 'var(--warning-500)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--warning-600) !important',
+            color: 'var(--warning-600)',
+            fill: 'var(--warning-600)',
+            '.icon': {
+                fill: 'var(--warning-600)',
+                color: 'var(--warning-600)',
+            },
+        },
+        '&:focus': {
+            borderColor: 'var(--warning-500) !important',
+            color: 'var(--warning-500)',
+            fill: 'var(--warning-500)',
+            '.icon': {
+                color: 'var(--warning-500)',
+                fill: 'var(--warning-500)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--warning-700) !important',
+            color: 'var(--warning-700)',
+            fill: 'var(--warning-700)',
+            '.icon': {
+                color: 'var(--warning-700)',
+                fill: 'var(--warning-700)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-danger': {
+        color: 'var(--danger-600)',
+        borderColor: 'var(--danger-600)',
+        fill: 'var(--danger-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--danger-700)',
+            color: 'var(--danger-700)',
+            fill: 'var(--danger-700)',
+            '.icon': {
+                color: 'var(--danger-700)',
+                fill: 'var(--danger-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--danger-600)',
+            color: 'var(--danger-600)',
+            fill: 'var(--danger-600)',
+            '.icon': {
+                color: 'var(--danger-600)',
+                fill: 'var(--danger-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--danger-800)',
+            color: 'var(--danger-800)',
+            fill: 'var(--danger-800)',
+            '.icon': {
+                color: 'var(--danger-800)',
+                fill: 'var(--danger-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-danger-light': {
+        color: 'var(--danger-600)',
+        borderColor: 'var(--danger-100) !important',
+        fill: 'var(--danger-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--danger-700) !important',
+            color: 'var(--danger-700)',
+            fill: 'var(--danger-700)',
+            '.icon': {
+                color: 'var(--danger-700)',
+                fill: 'var(--danger-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--danger-600) !important',
+            color: 'var(--danger-600)',
+            fill: 'var(--danger-600)',
+            '.icon': {
+                color: 'var(--danger-600)',
+                fill: 'var(--danger-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--danger-800) !important',
+            color: 'var(--danger-800)',
+            fill: 'var(--danger-800)',
+            '.icon': {
+                color: 'var(--danger-800)',
+                fill: 'var(--danger-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-info': {
+        color: 'var(--info-600)',
+        borderColor: 'var(--info-600)',
+        fill: 'var(--info-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--info-700)',
+            color: 'var(--info-700)',
+            fill: 'var(--info-700)',
+            '.icon': {
+                color: 'var(--info-700)',
+                fill: 'var(--info-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--info-600)',
+            color: 'var(--info-600)',
+            fill: 'var(--info-600)',
+            '.icon': {
+                color: 'var(--info-600)',
+                fill: 'var(--info-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--info-800)',
+            color: 'var(--info-800)',
+            fill: 'var(--info-800)',
+            '.icon': {
+                color: 'var(--info-800)',
+                fill: 'var(--info-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-info-light': {
+        color: 'var(--info-600)',
+        borderColor: 'var(--info-100) !important',
+        fill: 'var(--info-600)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--info-700) !important',
+            color: 'var(--info-700)',
+            fill: 'var(--info-700)',
+            '.icon': {
+                color: 'var(--info-700)',
+                fill: 'var(--info-700)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--info-600) !important',
+            color: 'var(--info-600)',
+            fill: 'var(--info-600)',
+            '.icon': {
+                color: 'var(--info-600)',
+                fill: 'var(--info-600)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--info-800) !important',
+            color: 'var(--info-800)',
+            fill: 'var(--info-800)',
+            '.icon': {
+                color: 'var(--info-800)',
+                fill: 'var(--info-800)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-gray': {
+        color: 'var(--neutral-0)',
+        borderColor: 'var(--neutral-0)',
+        fill: 'var(--neutral-0)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--neutral-100)',
+            color: 'var(--neutral-100)',
+            fill: 'var(--neutral-100)',
+            '.icon': {
+                color: 'var(--neutral-100)',
+                fill: 'var(--neutral-100)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--neutral-0)',
+            color: 'var(--neutral-0)',
+            fill: 'var(--neutral-0)',
+            '.icon': {
+                color: 'var(--neutral-0)',
+                fill: 'var(--neutral-0)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--neutral-300)',
+            color: 'var(--neutral-300)',
+            fill: 'var(--neutral-300)',
+            '.icon': {
+                color: 'var(--neutral-300)',
+                fill: 'var(--neutral-300)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-gray-light': {
+        color: 'var(--neutral-900)',
+        borderColor: 'var(--neutral-900) !important',
+        fill: 'var(--neutral-900)',
+        backgroundColor: 'var(--white)',
+        border: '2px solid',
+        '&:hover': {
+            borderColor: 'var(--neutral-100) !important',
+            color: 'var(--neutral-100)',
+            fill: 'var(--neutral-100)',
+            '.icon': {
+                color: 'var(--neutral-100)',
+                fill: 'var(--neutral-100)',
+            }
+        },
+        '&:focus': {
+            borderColor: 'var(--neutral-0) !important',
+            color: 'var(--neutral-0)',
+            fill: 'var(--neutral-0)',
+            '.icon': {
+                color: 'var(--neutral-0)',
+                fill: 'var(--neutral-0)',
+            }
+        },
+        '&:active': {
+            borderColor: 'var(--neutral-300) !important',
+            color: 'var(--neutral-300)',
+            fill: 'var(--neutral-300)',
+            '.icon': {
+                color: 'var(--neutral-300)',
+                fill: 'var(--neutral-300)',
+            }
+        }
+    },
+    '.outline-button.lu-btn-disabled': {
+        color: '#D2D3D5',
+        borderColor: '#D2D3D5',
+        fill: '#D2D3D5',
+        backgroundColor: 'var(--white)',
+        border: '2px solid'
+    }
+};
+export var customButtonSize = {
+    '.lu-btn-xl': {
+        //padding: top right bottom left
+        padding: 'var(--core-200) var(--core-300)',
+        fontSize: 'var(--core-250)',
+        fontWeight: '400',
+    },
+    '.lu-btn-lg': {
+        padding: 'var(--core-150) var(--core-250)',
+        fontSize: 'var(--core-225)',
+        fontWeight: '400',
+    },
+    '.lu-btn-md': {
+        padding: 'var(--core-100) var(--core-200)',
+        fontSize: 'var(--core-200)',
+        fontWeight: '400',
+    },
+    '.lu-btn-sm': {
+        padding: 'var(--core-100) var(--core-150)',
+        fontSize: 'var(--core-200)',
+        fontWeight: '400',
+    },
+};
+export var customIconButtonSize = {
+    '.icon-only.lu-btn-xl': {
+        //padding: top right bottom left
+        padding: 'var(--core-200)'
+    },
+    '.icon-only.lu-btn-lg': {
+        padding: 'var(--core-150)'
+    },
+    '.icon-only.lu-btn-md': {
+        padding: 'var(--core-100)'
+    },
+    '.icon-only.lu-btn-sm': {
+        padding: 'var(--core-100)'
+    },
+};
+// Components CSS Classes
+export var table_data_className = 'bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5';
+export var table_header_className = 'lu-pd-200';
+export var table_sub_heading_className = "lu-text-center lu-text-uppercase lu-font-weight-semibold lu-font-size-large lu-pd-200";
+export var table_row_className = "lu-pd-200";