New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@kong/design-tokens

Package Overview
Dependencies
Maintainers
2
Versions
335
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kong/design-tokens - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

dist/tokens/css/custom-properties-list.css
dist/tokens/css/custom-properties.css
dist/tokens/js/tokens.json
dist/tokens/less/variables.less
dist/tokens/scss/_map.scss

2

dist/tokens/js/cjs/index.d.ts
/**
* Do not edit directly
* Generated on Thu, 20 Jul 2023 21:02:45 GMT
* Generated on Fri, 21 Jul 2023 21:38:30 GMT
*

@@ -5,0 +5,0 @@ * Kong Design Tokens

2

dist/tokens/js/cjs/index.js
/**
* Do not edit directly
* Generated on Thu, 20 Jul 2023 21:02:45 GMT
* Generated on Fri, 21 Jul 2023 21:38:30 GMT
*

@@ -5,0 +5,0 @@ * Kong Design Tokens

2

dist/tokens/js/index.d.ts
/**
* Do not edit directly
* Generated on Thu, 20 Jul 2023 21:02:45 GMT
* Generated on Fri, 21 Jul 2023 21:38:30 GMT
*

@@ -5,0 +5,0 @@ * Kong Design Tokens

1879

dist/tokens/README.md
<!--
* Do not edit directly
* Generated on Thu, 20 Jul 2023 21:02:45 GMT
* Generated on Fri, 21 Jul 2023 21:38:30 GMT
*

@@ -14,4 +14,6 @@ * Kong Design Tokens

## SCSS Variables
## SCSS
### SCSS Variables
<details>

@@ -22,63 +24,124 @@

```scss
$kui-color-background: #ffffff; /* white */
$kui-color-background-danger: #d60027; /* red.60 */
$kui-color-background-danger-strong: #ad000e; /* red.70 */
$kui-color-background-danger-stronger: #850000; /* red.80 */
$kui-color-background-danger-strongest: #5c0000; /* red.90 */
$kui-color-background-danger-weak: #ff3954; /* red.40 */
$kui-color-background-danger-weaker: #ffabab; /* red.20 */
$kui-color-background-danger-weakest: #ffe5e5; /* red.10 */
$kui-color-background-disabled: #e0e4ea; /* gray.20 */
$kui-color-background-inverse: #000933; /* blue.100 */
$kui-color-background-neutral: #6c7489; /* gray.60 */
$kui-color-background-neutral-strong: #52596e; /* gray.70 */
$kui-color-background-neutral-stronger: #3a3f51; /* gray.80 */
$kui-color-background-neutral-strongest: #232633; /* gray.90 */
$kui-color-background-neutral-weak: #afb7c5; /* gray.40 */
$kui-color-background-neutral-weaker: #e0e4ea; /* gray.20 */
$kui-color-background-neutral-weakest: #f9fafb; /* gray.10 */
$kui-color-background-primary: #0044f4; /* blue.60 */
$kui-color-background-primary-strong: #0030cc; /* blue.70 */
$kui-color-background-primary-stronger: #002099; /* blue.80 */
$kui-color-background-primary-strongest: #001466; /* blue.90 */
$kui-color-background-primary-weak: #5f9aff; /* blue.40 */
$kui-color-background-primary-weaker: #bee2ff; /* blue.20 */
$kui-color-background-primary-weakest: #eefaff; /* blue.10 */
$kui-color-background-success-weakest: #ecfffb; /* green.10 */
$kui-color-background-transparent: rgba(0, 0, 0, 0); /* transparent */
$kui-color-background-warning-weakest: #fffce0; /* yellow.10 */
$kui-color-border: #e0e4ea; /* gray.20 */
$kui-color-border-danger: #d60027; /* red.60 */
$kui-color-border-danger-strong: #ad000e; /* red.70 */
$kui-color-border-danger-stronger: #850000; /* red.80 */
$kui-color-border-danger-strongest: #5c0000; /* red.90 */
$kui-color-border-danger-weak: #ff3954; /* red.40 */
$kui-color-border-danger-weaker: #ffabab; /* red.20 */
$kui-color-border-danger-weakest: #ffe5e5; /* red.10 */
$kui-color-border-decorative: #6f28ff; /* purple.60 */
$kui-color-border-disabled: #e0e4ea; /* gray.20 */
$kui-color-border-neutral-weak: #afb7c5; /* gray.40 */
$kui-color-border-primary: #0044f4; /* blue.60 */
$kui-color-border-primary-strong: #0030cc; /* blue.70 */
$kui-color-border-primary-stronger: #002099; /* blue.80 */
$kui-color-border-primary-strongest: #001466; /* blue.90 */
$kui-color-border-primary-weak: #5f9aff; /* blue.40 */
$kui-color-border-primary-weaker: #bee2ff; /* blue.20 */
$kui-color-border-primary-weakest: #eefaff; /* blue.10 */
$kui-color-border-transparent: rgba(0, 0, 0, 0); /* transparent */
$kui-color-text: #000933; /* blue.100 */
$kui-color-text-danger: #d60027; /* red.60 */
$kui-color-text-decorative: #00abd2; /* aqua.50 */
$kui-color-text-disabled: #828a9e; /* gray.50 */
$kui-color-text-inverse: #ffffff; /* white */
$kui-color-text-neutral: #6c7489; /* gray.60 */
$kui-color-text-neutral-strong: #52596e; /* gray.70 */
$kui-color-text-neutral-stronger: #3a3f51; /* gray.80 */
$kui-color-text-neutral-strongest: #232633; /* gray.90 */
$kui-color-text-neutral-weak: #afb7c5; /* gray.40 */
$kui-color-text-primary: #0044f4; /* blue.60 */
$kui-color-text-primary-strong: #0030cc; /* blue.70 */
$kui-color-text-primary-stronger: #002099; /* blue.80 */
$kui-color-text-success: #007d60; /* green.60 */
$kui-color-text-warning: #995c00; /* yellow.60 */
/* white */
$kui-color-background: #ffffff;
/* red.60 */
$kui-color-background-danger: #d60027;
/* red.70 */
$kui-color-background-danger-strong: #ad000e;
/* red.80 */
$kui-color-background-danger-stronger: #850000;
/* red.90 */
$kui-color-background-danger-strongest: #5c0000;
/* red.40 */
$kui-color-background-danger-weak: #ff3954;
/* red.20 */
$kui-color-background-danger-weaker: #ffabab;
/* red.10 */
$kui-color-background-danger-weakest: #ffe5e5;
/* gray.20 */
$kui-color-background-disabled: #e0e4ea;
/* blue.100 */
$kui-color-background-inverse: #000933;
/* gray.60 */
$kui-color-background-neutral: #6c7489;
/* gray.70 */
$kui-color-background-neutral-strong: #52596e;
/* gray.80 */
$kui-color-background-neutral-stronger: #3a3f51;
/* gray.90 */
$kui-color-background-neutral-strongest: #232633;
/* gray.40 */
$kui-color-background-neutral-weak: #afb7c5;
/* gray.20 */
$kui-color-background-neutral-weaker: #e0e4ea;
/* gray.10 */
$kui-color-background-neutral-weakest: #f9fafb;
/* blue.60 */
$kui-color-background-primary: #0044f4;
/* blue.70 */
$kui-color-background-primary-strong: #0030cc;
/* blue.80 */
$kui-color-background-primary-stronger: #002099;
/* blue.90 */
$kui-color-background-primary-strongest: #001466;
/* blue.40 */
$kui-color-background-primary-weak: #5f9aff;
/* blue.20 */
$kui-color-background-primary-weaker: #bee2ff;
/* blue.10 */
$kui-color-background-primary-weakest: #eefaff;
/* green.10 */
$kui-color-background-success-weakest: #ecfffb;
/* transparent */
$kui-color-background-transparent: rgba(0, 0, 0, 0);
/* yellow.10 */
$kui-color-background-warning-weakest: #fffce0;
/* gray.20 */
$kui-color-border: #e0e4ea;
/* red.60 */
$kui-color-border-danger: #d60027;
/* red.70 */
$kui-color-border-danger-strong: #ad000e;
/* red.80 */
$kui-color-border-danger-stronger: #850000;
/* red.90 */
$kui-color-border-danger-strongest: #5c0000;
/* red.40 */
$kui-color-border-danger-weak: #ff3954;
/* red.20 */
$kui-color-border-danger-weaker: #ffabab;
/* red.10 */
$kui-color-border-danger-weakest: #ffe5e5;
/* purple.60 */
$kui-color-border-decorative: #6f28ff;
/* gray.20 */
$kui-color-border-disabled: #e0e4ea;
/* gray.40 */
$kui-color-border-neutral-weak: #afb7c5;
/* blue.60 */
$kui-color-border-primary: #0044f4;
/* blue.70 */
$kui-color-border-primary-strong: #0030cc;
/* blue.80 */
$kui-color-border-primary-stronger: #002099;
/* blue.90 */
$kui-color-border-primary-strongest: #001466;
/* blue.40 */
$kui-color-border-primary-weak: #5f9aff;
/* blue.20 */
$kui-color-border-primary-weaker: #bee2ff;
/* blue.10 */
$kui-color-border-primary-weakest: #eefaff;
/* transparent */
$kui-color-border-transparent: rgba(0, 0, 0, 0);
/* blue.100 */
$kui-color-text: #000933;
/* red.60 */
$kui-color-text-danger: #d60027;
/* aqua.50 */
$kui-color-text-decorative: #00abd2;
/* gray.50 */
$kui-color-text-disabled: #828a9e;
/* white */
$kui-color-text-inverse: #ffffff;
/* gray.60 */
$kui-color-text-neutral: #6c7489;
/* gray.70 */
$kui-color-text-neutral-strong: #52596e;
/* gray.80 */
$kui-color-text-neutral-stronger: #3a3f51;
/* gray.90 */
$kui-color-text-neutral-strongest: #232633;
/* gray.40 */
$kui-color-text-neutral-weak: #afb7c5;
/* blue.60 */
$kui-color-text-primary: #0044f4;
/* blue.70 */
$kui-color-text-primary-strong: #0030cc;
/* blue.80 */
$kui-color-text-primary-stronger: #002099;
/* green.60 */
$kui-color-text-success: #007d60;
/* yellow.60 */
$kui-color-text-warning: #995c00;
$kui-border-radius-0: 0px;

@@ -89,4 +152,6 @@ $kui-border-radius-10: 2px;

$kui-border-radius-40: 8px;
$kui-border-radius-circle: 50%; /* Used to create a circle. Value of 50% */
$kui-border-radius-round: 100px; /* Used to round element corners. Value of 100px */
/* Used to create a circle. Value of 50% */
$kui-border-radius-circle: 50%;
/* Used to round element corners. Value of 100px */
$kui-border-radius-round: 100px;
$kui-border-width-0: 0px;

@@ -96,7 +161,12 @@ $kui-border-width-10: 1px;

$kui-border-width-30: 4px;
$kui-breakpoint-mobile: 640px; /* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
$kui-breakpoint-phablet: 768px; /* Used for tablet screens. */
$kui-breakpoint-tablet: 1024px; /* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
$kui-breakpoint-laptop: 1280px; /* Used for standard desktop screens. */
$kui-breakpoint-desktop: 1536px; /* Used for larger desktop screens. */
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
$kui-breakpoint-mobile: 640px;
/* Used for tablet screens. */
$kui-breakpoint-phablet: 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
$kui-breakpoint-tablet: 1024px;
/* Used for standard desktop screens. */
$kui-breakpoint-laptop: 1280px;
/* Used for larger desktop screens. */
$kui-breakpoint-desktop: 1536px;
$kui-icon-size-10: 10px;

@@ -106,26 +176,47 @@ $kui-icon-size-20: 12px;

$kui-icon-size-40: 20px;
$kui-icon-size-50: 24px; /* The default icon size */
/* The default icon size */
$kui-icon-size-50: 24px;
$kui-icon-size-60: 32px;
$kui-icon-size-70: 40px;
$kui-icon-size-80: 48px;
$kui-method-color-background-connect: #f1f0ff; /* purple.10 */
$kui-method-color-background-delete: #ffe5e5; /* red.10 */
$kui-method-color-background-get: #eefaff; /* blue.10 */
$kui-method-color-background-head: #6c7489; /* gray.60 */
$kui-method-color-background-options: #f9fafb; /* gray.10 */
$kui-method-color-background-patch: #ecfcff; /* aqua.10 */
$kui-method-color-background-post: #ecfffb; /* green.10 */
$kui-method-color-background-put: #fffce0; /* yellow.10 */
$kui-method-color-background-trace: #fff0f7; /* pink.10 */
$kui-method-color-text-connect: #6f28ff; /* purple.60 */
$kui-method-color-text-delete: #d60027; /* red.60 */
$kui-method-color-text-get: #0044f4; /* blue.60 */
$kui-method-color-text-head: #f9fafb; /* gray.10 */
$kui-method-color-text-options: #6c7489; /* gray.60 */
$kui-method-color-text-patch: #00819d; /* aqua.60 */
$kui-method-color-text-post: #007d60; /* green.60 */
$kui-method-color-text-put: #995c00; /* yellow.60 */
$kui-method-color-text-trace: #d60067; /* pink.60 */
$kui-font-family-code: 'JetBrains Mono', Consolas, monospace; /* The standard monospace font family. */
$kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif; /* The standard text font family. */
/* purple.10 */
$kui-method-color-background-connect: #f1f0ff;
/* red.10 */
$kui-method-color-background-delete: #ffe5e5;
/* blue.10 */
$kui-method-color-background-get: #eefaff;
/* gray.60 */
$kui-method-color-background-head: #6c7489;
/* gray.10 */
$kui-method-color-background-options: #f9fafb;
/* aqua.10 */
$kui-method-color-background-patch: #ecfcff;
/* green.10 */
$kui-method-color-background-post: #ecfffb;
/* yellow.10 */
$kui-method-color-background-put: #fffce0;
/* pink.10 */
$kui-method-color-background-trace: #fff0f7;
/* purple.60 */
$kui-method-color-text-connect: #6f28ff;
/* red.60 */
$kui-method-color-text-delete: #d60027;
/* blue.60 */
$kui-method-color-text-get: #0044f4;
/* gray.10 */
$kui-method-color-text-head: #f9fafb;
/* gray.60 */
$kui-method-color-text-options: #6c7489;
/* aqua.60 */
$kui-method-color-text-patch: #00819d;
/* green.60 */
$kui-method-color-text-post: #007d60;
/* yellow.60 */
$kui-method-color-text-put: #995c00;
/* pink.60 */
$kui-method-color-text-trace: #d60067;
/* The standard monospace font family. */
$kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
$kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif;
$kui-font-size-10: 10px;

@@ -141,33 +232,64 @@ $kui-font-size-20: 12px;

$kui-font-size-100: 48px;
$kui-font-weight-bold: 700; /* 700 */
$kui-font-weight-medium: 500; /* 500 */
$kui-font-weight-regular: 400; /* 400: The normal font weight. */
$kui-font-weight-semibold: 600; /* 600 */
$kui-line-height-10: 12px; /* 12px */
$kui-line-height-20: 16px; /* 16px */
$kui-line-height-30: 20px; /* 20px */
$kui-line-height-40: 24px; /* 24px */
$kui-line-height-50: 28px; /* 28px */
$kui-line-height-60: 32px; /* 32px */
$kui-line-height-70: 36px; /* 36px */
$kui-line-height-80: 40px; /* 40px */
$kui-line-height-90: 48px; /* 48px */
$kui-line-height-100: 56px; /* 56px */
$kui-space-0: 0px; /* 0px */
$kui-space-10: 2px; /* 2px */
$kui-space-20: 4px; /* 4px */
$kui-space-30: 6px; /* 6px */
$kui-space-40: 8px; /* 8px */
$kui-space-50: 12px; /* 12px */
$kui-space-60: 16px; /* 16px */
$kui-space-70: 20px; /* 20px */
$kui-space-80: 24px; /* 24px */
$kui-space-90: 32px; /* 32px */
$kui-space-100: 40px; /* 40px */
$kui-space-110: 48px; /* 48px */
$kui-space-120: 56px; /* 56px */
$kui-space-130: 64px; /* 64px */
$kui-space-140: 80px; /* 80px */
$kui-space-150: 96px; /* 96px */
$kui-space-auto: auto; /* auto */
/* 700 */
$kui-font-weight-bold: 700;
/* 500 */
$kui-font-weight-medium: 500;
/* 400: The normal font weight. */
$kui-font-weight-regular: 400;
/* 600 */
$kui-font-weight-semibold: 600;
/* 12px */
$kui-line-height-10: 12px;
/* 16px */
$kui-line-height-20: 16px;
/* 20px */
$kui-line-height-30: 20px;
/* 24px */
$kui-line-height-40: 24px;
/* 28px */
$kui-line-height-50: 28px;
/* 32px */
$kui-line-height-60: 32px;
/* 36px */
$kui-line-height-70: 36px;
/* 40px */
$kui-line-height-80: 40px;
/* 48px */
$kui-line-height-90: 48px;
/* 56px */
$kui-line-height-100: 56px;
/* 0px */
$kui-space-0: 0px;
/* 2px */
$kui-space-10: 2px;
/* 4px */
$kui-space-20: 4px;
/* 6px */
$kui-space-30: 6px;
/* 8px */
$kui-space-40: 8px;
/* 12px */
$kui-space-50: 12px;
/* 16px */
$kui-space-60: 16px;
/* 20px */
$kui-space-70: 20px;
/* 24px */
$kui-space-80: 24px;
/* 32px */
$kui-space-90: 32px;
/* 40px */
$kui-space-100: 40px;
/* 48px */
$kui-space-110: 48px;
/* 56px */
$kui-space-120: 56px;
/* 64px */
$kui-space-130: 64px;
/* 80px */
$kui-space-140: 80px;
/* 96px */
$kui-space-150: 96px;
/* auto */
$kui-space-auto: auto;
```

@@ -177,70 +299,972 @@

## JavaScript Variables
### SCSS Map
<details>
<summary>Click to view exported SCSS map</summary>
```scss
$tokens-map: (
/* white */
'kui-color-background': #ffffff;
/* red.60 */
'kui-color-background-danger': #d60027;
/* red.70 */
'kui-color-background-danger-strong': #ad000e;
/* red.80 */
'kui-color-background-danger-stronger': #850000;
/* red.90 */
'kui-color-background-danger-strongest': #5c0000;
/* red.40 */
'kui-color-background-danger-weak': #ff3954;
/* red.20 */
'kui-color-background-danger-weaker': #ffabab;
/* red.10 */
'kui-color-background-danger-weakest': #ffe5e5;
/* gray.20 */
'kui-color-background-disabled': #e0e4ea;
/* blue.100 */
'kui-color-background-inverse': #000933;
/* gray.60 */
'kui-color-background-neutral': #6c7489;
/* gray.70 */
'kui-color-background-neutral-strong': #52596e;
/* gray.80 */
'kui-color-background-neutral-stronger': #3a3f51;
/* gray.90 */
'kui-color-background-neutral-strongest': #232633;
/* gray.40 */
'kui-color-background-neutral-weak': #afb7c5;
/* gray.20 */
'kui-color-background-neutral-weaker': #e0e4ea;
/* gray.10 */
'kui-color-background-neutral-weakest': #f9fafb;
/* blue.60 */
'kui-color-background-primary': #0044f4;
/* blue.70 */
'kui-color-background-primary-strong': #0030cc;
/* blue.80 */
'kui-color-background-primary-stronger': #002099;
/* blue.90 */
'kui-color-background-primary-strongest': #001466;
/* blue.40 */
'kui-color-background-primary-weak': #5f9aff;
/* blue.20 */
'kui-color-background-primary-weaker': #bee2ff;
/* blue.10 */
'kui-color-background-primary-weakest': #eefaff;
/* green.10 */
'kui-color-background-success-weakest': #ecfffb;
/* transparent */
'kui-color-background-transparent': rgba(0, 0, 0, 0);
/* yellow.10 */
'kui-color-background-warning-weakest': #fffce0;
/* gray.20 */
'kui-color-border': #e0e4ea;
/* red.60 */
'kui-color-border-danger': #d60027;
/* red.70 */
'kui-color-border-danger-strong': #ad000e;
/* red.80 */
'kui-color-border-danger-stronger': #850000;
/* red.90 */
'kui-color-border-danger-strongest': #5c0000;
/* red.40 */
'kui-color-border-danger-weak': #ff3954;
/* red.20 */
'kui-color-border-danger-weaker': #ffabab;
/* red.10 */
'kui-color-border-danger-weakest': #ffe5e5;
/* purple.60 */
'kui-color-border-decorative': #6f28ff;
/* gray.20 */
'kui-color-border-disabled': #e0e4ea;
/* gray.40 */
'kui-color-border-neutral-weak': #afb7c5;
/* blue.60 */
'kui-color-border-primary': #0044f4;
/* blue.70 */
'kui-color-border-primary-strong': #0030cc;
/* blue.80 */
'kui-color-border-primary-stronger': #002099;
/* blue.90 */
'kui-color-border-primary-strongest': #001466;
/* blue.40 */
'kui-color-border-primary-weak': #5f9aff;
/* blue.20 */
'kui-color-border-primary-weaker': #bee2ff;
/* blue.10 */
'kui-color-border-primary-weakest': #eefaff;
/* transparent */
'kui-color-border-transparent': rgba(0, 0, 0, 0);
/* blue.100 */
'kui-color-text': #000933;
/* red.60 */
'kui-color-text-danger': #d60027;
/* aqua.50 */
'kui-color-text-decorative': #00abd2;
/* gray.50 */
'kui-color-text-disabled': #828a9e;
/* white */
'kui-color-text-inverse': #ffffff;
/* gray.60 */
'kui-color-text-neutral': #6c7489;
/* gray.70 */
'kui-color-text-neutral-strong': #52596e;
/* gray.80 */
'kui-color-text-neutral-stronger': #3a3f51;
/* gray.90 */
'kui-color-text-neutral-strongest': #232633;
/* gray.40 */
'kui-color-text-neutral-weak': #afb7c5;
/* blue.60 */
'kui-color-text-primary': #0044f4;
/* blue.70 */
'kui-color-text-primary-strong': #0030cc;
/* blue.80 */
'kui-color-text-primary-stronger': #002099;
/* green.60 */
'kui-color-text-success': #007d60;
/* yellow.60 */
'kui-color-text-warning': #995c00;
'kui-border-radius-0': 0px;
'kui-border-radius-10': 2px;
'kui-border-radius-20': 4px;
'kui-border-radius-30': 6px;
'kui-border-radius-40': 8px;
/* Used to create a circle. Value of 50% */
'kui-border-radius-circle': 50%;
/* Used to round element corners. Value of 100px */
'kui-border-radius-round': 100px;
'kui-border-width-0': 0px;
'kui-border-width-10': 1px;
'kui-border-width-20': 2px;
'kui-border-width-30': 4px;
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
'kui-breakpoint-mobile': 640px;
/* Used for tablet screens. */
'kui-breakpoint-phablet': 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
'kui-breakpoint-tablet': 1024px;
/* Used for standard desktop screens. */
'kui-breakpoint-laptop': 1280px;
/* Used for larger desktop screens. */
'kui-breakpoint-desktop': 1536px;
'kui-icon-size-10': 10px;
'kui-icon-size-20': 12px;
'kui-icon-size-30': 16px;
'kui-icon-size-40': 20px;
/* The default icon size */
'kui-icon-size-50': 24px;
'kui-icon-size-60': 32px;
'kui-icon-size-70': 40px;
'kui-icon-size-80': 48px;
/* purple.10 */
'kui-method-color-background-connect': #f1f0ff;
/* red.10 */
'kui-method-color-background-delete': #ffe5e5;
/* blue.10 */
'kui-method-color-background-get': #eefaff;
/* gray.60 */
'kui-method-color-background-head': #6c7489;
/* gray.10 */
'kui-method-color-background-options': #f9fafb;
/* aqua.10 */
'kui-method-color-background-patch': #ecfcff;
/* green.10 */
'kui-method-color-background-post': #ecfffb;
/* yellow.10 */
'kui-method-color-background-put': #fffce0;
/* pink.10 */
'kui-method-color-background-trace': #fff0f7;
/* purple.60 */
'kui-method-color-text-connect': #6f28ff;
/* red.60 */
'kui-method-color-text-delete': #d60027;
/* blue.60 */
'kui-method-color-text-get': #0044f4;
/* gray.10 */
'kui-method-color-text-head': #f9fafb;
/* gray.60 */
'kui-method-color-text-options': #6c7489;
/* aqua.60 */
'kui-method-color-text-patch': #00819d;
/* green.60 */
'kui-method-color-text-post': #007d60;
/* yellow.60 */
'kui-method-color-text-put': #995c00;
/* pink.60 */
'kui-method-color-text-trace': #d60067;
/* The standard monospace font family. */
'kui-font-family-code': 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
'kui-font-family-text': 'Inter', Roboto, Helvetica, sans-serif;
'kui-font-size-10': 10px;
'kui-font-size-20': 12px;
'kui-font-size-30': 14px;
'kui-font-size-40': 16px;
'kui-font-size-50': 18px;
'kui-font-size-60': 20px;
'kui-font-size-70': 24px;
'kui-font-size-80': 32px;
'kui-font-size-90': 40px;
'kui-font-size-100': 48px;
/* 700 */
'kui-font-weight-bold': 700;
/* 500 */
'kui-font-weight-medium': 500;
/* 400: The normal font weight. */
'kui-font-weight-regular': 400;
/* 600 */
'kui-font-weight-semibold': 600;
/* 12px */
'kui-line-height-10': 12px;
/* 16px */
'kui-line-height-20': 16px;
/* 20px */
'kui-line-height-30': 20px;
/* 24px */
'kui-line-height-40': 24px;
/* 28px */
'kui-line-height-50': 28px;
/* 32px */
'kui-line-height-60': 32px;
/* 36px */
'kui-line-height-70': 36px;
/* 40px */
'kui-line-height-80': 40px;
/* 48px */
'kui-line-height-90': 48px;
/* 56px */
'kui-line-height-100': 56px;
/* 0px */
'kui-space-0': 0px;
/* 2px */
'kui-space-10': 2px;
/* 4px */
'kui-space-20': 4px;
/* 6px */
'kui-space-30': 6px;
/* 8px */
'kui-space-40': 8px;
/* 12px */
'kui-space-50': 12px;
/* 16px */
'kui-space-60': 16px;
/* 20px */
'kui-space-70': 20px;
/* 24px */
'kui-space-80': 24px;
/* 32px */
'kui-space-90': 32px;
/* 40px */
'kui-space-100': 40px;
/* 48px */
'kui-space-110': 48px;
/* 56px */
'kui-space-120': 56px;
/* 64px */
'kui-space-130': 64px;
/* 80px */
'kui-space-140': 80px;
/* 96px */
'kui-space-150': 96px;
/* auto */
'kui-space-auto': auto;
);
```
</details>
## LESS
### LESS Variables
<details>
<summary>Click to view the list of LESS variables</summary>
```less
/* white */
@kui-color-background: #ffffff;
/* red.60 */
@kui-color-background-danger: #d60027;
/* red.70 */
@kui-color-background-danger-strong: #ad000e;
/* red.80 */
@kui-color-background-danger-stronger: #850000;
/* red.90 */
@kui-color-background-danger-strongest: #5c0000;
/* red.40 */
@kui-color-background-danger-weak: #ff3954;
/* red.20 */
@kui-color-background-danger-weaker: #ffabab;
/* red.10 */
@kui-color-background-danger-weakest: #ffe5e5;
/* gray.20 */
@kui-color-background-disabled: #e0e4ea;
/* blue.100 */
@kui-color-background-inverse: #000933;
/* gray.60 */
@kui-color-background-neutral: #6c7489;
/* gray.70 */
@kui-color-background-neutral-strong: #52596e;
/* gray.80 */
@kui-color-background-neutral-stronger: #3a3f51;
/* gray.90 */
@kui-color-background-neutral-strongest: #232633;
/* gray.40 */
@kui-color-background-neutral-weak: #afb7c5;
/* gray.20 */
@kui-color-background-neutral-weaker: #e0e4ea;
/* gray.10 */
@kui-color-background-neutral-weakest: #f9fafb;
/* blue.60 */
@kui-color-background-primary: #0044f4;
/* blue.70 */
@kui-color-background-primary-strong: #0030cc;
/* blue.80 */
@kui-color-background-primary-stronger: #002099;
/* blue.90 */
@kui-color-background-primary-strongest: #001466;
/* blue.40 */
@kui-color-background-primary-weak: #5f9aff;
/* blue.20 */
@kui-color-background-primary-weaker: #bee2ff;
/* blue.10 */
@kui-color-background-primary-weakest: #eefaff;
/* green.10 */
@kui-color-background-success-weakest: #ecfffb;
/* transparent */
@kui-color-background-transparent: rgba(0, 0, 0, 0);
/* yellow.10 */
@kui-color-background-warning-weakest: #fffce0;
/* gray.20 */
@kui-color-border: #e0e4ea;
/* red.60 */
@kui-color-border-danger: #d60027;
/* red.70 */
@kui-color-border-danger-strong: #ad000e;
/* red.80 */
@kui-color-border-danger-stronger: #850000;
/* red.90 */
@kui-color-border-danger-strongest: #5c0000;
/* red.40 */
@kui-color-border-danger-weak: #ff3954;
/* red.20 */
@kui-color-border-danger-weaker: #ffabab;
/* red.10 */
@kui-color-border-danger-weakest: #ffe5e5;
/* purple.60 */
@kui-color-border-decorative: #6f28ff;
/* gray.20 */
@kui-color-border-disabled: #e0e4ea;
/* gray.40 */
@kui-color-border-neutral-weak: #afb7c5;
/* blue.60 */
@kui-color-border-primary: #0044f4;
/* blue.70 */
@kui-color-border-primary-strong: #0030cc;
/* blue.80 */
@kui-color-border-primary-stronger: #002099;
/* blue.90 */
@kui-color-border-primary-strongest: #001466;
/* blue.40 */
@kui-color-border-primary-weak: #5f9aff;
/* blue.20 */
@kui-color-border-primary-weaker: #bee2ff;
/* blue.10 */
@kui-color-border-primary-weakest: #eefaff;
/* transparent */
@kui-color-border-transparent: rgba(0, 0, 0, 0);
/* blue.100 */
@kui-color-text: #000933;
/* red.60 */
@kui-color-text-danger: #d60027;
/* aqua.50 */
@kui-color-text-decorative: #00abd2;
/* gray.50 */
@kui-color-text-disabled: #828a9e;
/* white */
@kui-color-text-inverse: #ffffff;
/* gray.60 */
@kui-color-text-neutral: #6c7489;
/* gray.70 */
@kui-color-text-neutral-strong: #52596e;
/* gray.80 */
@kui-color-text-neutral-stronger: #3a3f51;
/* gray.90 */
@kui-color-text-neutral-strongest: #232633;
/* gray.40 */
@kui-color-text-neutral-weak: #afb7c5;
/* blue.60 */
@kui-color-text-primary: #0044f4;
/* blue.70 */
@kui-color-text-primary-strong: #0030cc;
/* blue.80 */
@kui-color-text-primary-stronger: #002099;
/* green.60 */
@kui-color-text-success: #007d60;
/* yellow.60 */
@kui-color-text-warning: #995c00;
@kui-border-radius-0: 0px;
@kui-border-radius-10: 2px;
@kui-border-radius-20: 4px;
@kui-border-radius-30: 6px;
@kui-border-radius-40: 8px;
/* Used to create a circle. Value of 50% */
@kui-border-radius-circle: 50%;
/* Used to round element corners. Value of 100px */
@kui-border-radius-round: 100px;
@kui-border-width-0: 0px;
@kui-border-width-10: 1px;
@kui-border-width-20: 2px;
@kui-border-width-30: 4px;
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
@kui-breakpoint-mobile: 640px;
/* Used for tablet screens. */
@kui-breakpoint-phablet: 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
@kui-breakpoint-tablet: 1024px;
/* Used for standard desktop screens. */
@kui-breakpoint-laptop: 1280px;
/* Used for larger desktop screens. */
@kui-breakpoint-desktop: 1536px;
@kui-icon-size-10: 10px;
@kui-icon-size-20: 12px;
@kui-icon-size-30: 16px;
@kui-icon-size-40: 20px;
/* The default icon size */
@kui-icon-size-50: 24px;
@kui-icon-size-60: 32px;
@kui-icon-size-70: 40px;
@kui-icon-size-80: 48px;
/* purple.10 */
@kui-method-color-background-connect: #f1f0ff;
/* red.10 */
@kui-method-color-background-delete: #ffe5e5;
/* blue.10 */
@kui-method-color-background-get: #eefaff;
/* gray.60 */
@kui-method-color-background-head: #6c7489;
/* gray.10 */
@kui-method-color-background-options: #f9fafb;
/* aqua.10 */
@kui-method-color-background-patch: #ecfcff;
/* green.10 */
@kui-method-color-background-post: #ecfffb;
/* yellow.10 */
@kui-method-color-background-put: #fffce0;
/* pink.10 */
@kui-method-color-background-trace: #fff0f7;
/* purple.60 */
@kui-method-color-text-connect: #6f28ff;
/* red.60 */
@kui-method-color-text-delete: #d60027;
/* blue.60 */
@kui-method-color-text-get: #0044f4;
/* gray.10 */
@kui-method-color-text-head: #f9fafb;
/* gray.60 */
@kui-method-color-text-options: #6c7489;
/* aqua.60 */
@kui-method-color-text-patch: #00819d;
/* green.60 */
@kui-method-color-text-post: #007d60;
/* yellow.60 */
@kui-method-color-text-put: #995c00;
/* pink.60 */
@kui-method-color-text-trace: #d60067;
/* The standard monospace font family. */
@kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
@kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif;
@kui-font-size-10: 10px;
@kui-font-size-20: 12px;
@kui-font-size-30: 14px;
@kui-font-size-40: 16px;
@kui-font-size-50: 18px;
@kui-font-size-60: 20px;
@kui-font-size-70: 24px;
@kui-font-size-80: 32px;
@kui-font-size-90: 40px;
@kui-font-size-100: 48px;
/* 700 */
@kui-font-weight-bold: 700;
/* 500 */
@kui-font-weight-medium: 500;
/* 400: The normal font weight. */
@kui-font-weight-regular: 400;
/* 600 */
@kui-font-weight-semibold: 600;
/* 12px */
@kui-line-height-10: 12px;
/* 16px */
@kui-line-height-20: 16px;
/* 20px */
@kui-line-height-30: 20px;
/* 24px */
@kui-line-height-40: 24px;
/* 28px */
@kui-line-height-50: 28px;
/* 32px */
@kui-line-height-60: 32px;
/* 36px */
@kui-line-height-70: 36px;
/* 40px */
@kui-line-height-80: 40px;
/* 48px */
@kui-line-height-90: 48px;
/* 56px */
@kui-line-height-100: 56px;
/* 0px */
@kui-space-0: 0px;
/* 2px */
@kui-space-10: 2px;
/* 4px */
@kui-space-20: 4px;
/* 6px */
@kui-space-30: 6px;
/* 8px */
@kui-space-40: 8px;
/* 12px */
@kui-space-50: 12px;
/* 16px */
@kui-space-60: 16px;
/* 20px */
@kui-space-70: 20px;
/* 24px */
@kui-space-80: 24px;
/* 32px */
@kui-space-90: 32px;
/* 40px */
@kui-space-100: 40px;
/* 48px */
@kui-space-110: 48px;
/* 56px */
@kui-space-120: 56px;
/* 64px */
@kui-space-130: 64px;
/* 80px */
@kui-space-140: 80px;
/* 96px */
@kui-space-150: 96px;
/* auto */
@kui-space-auto: auto;
```
</details>
## CSS
### CSS Custom Properties
You may scope your CSS custom property overrides inside the `:root` selector as shown here, or inside any other valid CSS selector.
<details>
<summary>Click to view the list of CSS custom properties</summary>
```scss
/* white */
--kui-color-background: #ffffff;
/* red.60 */
--kui-color-background-danger: #d60027;
/* red.70 */
--kui-color-background-danger-strong: #ad000e;
/* red.80 */
--kui-color-background-danger-stronger: #850000;
/* red.90 */
--kui-color-background-danger-strongest: #5c0000;
/* red.40 */
--kui-color-background-danger-weak: #ff3954;
/* red.20 */
--kui-color-background-danger-weaker: #ffabab;
/* red.10 */
--kui-color-background-danger-weakest: #ffe5e5;
/* gray.20 */
--kui-color-background-disabled: #e0e4ea;
/* blue.100 */
--kui-color-background-inverse: #000933;
/* gray.60 */
--kui-color-background-neutral: #6c7489;
/* gray.70 */
--kui-color-background-neutral-strong: #52596e;
/* gray.80 */
--kui-color-background-neutral-stronger: #3a3f51;
/* gray.90 */
--kui-color-background-neutral-strongest: #232633;
/* gray.40 */
--kui-color-background-neutral-weak: #afb7c5;
/* gray.20 */
--kui-color-background-neutral-weaker: #e0e4ea;
/* gray.10 */
--kui-color-background-neutral-weakest: #f9fafb;
/* blue.60 */
--kui-color-background-primary: #0044f4;
/* blue.70 */
--kui-color-background-primary-strong: #0030cc;
/* blue.80 */
--kui-color-background-primary-stronger: #002099;
/* blue.90 */
--kui-color-background-primary-strongest: #001466;
/* blue.40 */
--kui-color-background-primary-weak: #5f9aff;
/* blue.20 */
--kui-color-background-primary-weaker: #bee2ff;
/* blue.10 */
--kui-color-background-primary-weakest: #eefaff;
/* green.10 */
--kui-color-background-success-weakest: #ecfffb;
/* transparent */
--kui-color-background-transparent: rgba(0, 0, 0, 0);
/* yellow.10 */
--kui-color-background-warning-weakest: #fffce0;
/* gray.20 */
--kui-color-border: #e0e4ea;
/* red.60 */
--kui-color-border-danger: #d60027;
/* red.70 */
--kui-color-border-danger-strong: #ad000e;
/* red.80 */
--kui-color-border-danger-stronger: #850000;
/* red.90 */
--kui-color-border-danger-strongest: #5c0000;
/* red.40 */
--kui-color-border-danger-weak: #ff3954;
/* red.20 */
--kui-color-border-danger-weaker: #ffabab;
/* red.10 */
--kui-color-border-danger-weakest: #ffe5e5;
/* purple.60 */
--kui-color-border-decorative: #6f28ff;
/* gray.20 */
--kui-color-border-disabled: #e0e4ea;
/* gray.40 */
--kui-color-border-neutral-weak: #afb7c5;
/* blue.60 */
--kui-color-border-primary: #0044f4;
/* blue.70 */
--kui-color-border-primary-strong: #0030cc;
/* blue.80 */
--kui-color-border-primary-stronger: #002099;
/* blue.90 */
--kui-color-border-primary-strongest: #001466;
/* blue.40 */
--kui-color-border-primary-weak: #5f9aff;
/* blue.20 */
--kui-color-border-primary-weaker: #bee2ff;
/* blue.10 */
--kui-color-border-primary-weakest: #eefaff;
/* transparent */
--kui-color-border-transparent: rgba(0, 0, 0, 0);
/* blue.100 */
--kui-color-text: #000933;
/* red.60 */
--kui-color-text-danger: #d60027;
/* aqua.50 */
--kui-color-text-decorative: #00abd2;
/* gray.50 */
--kui-color-text-disabled: #828a9e;
/* white */
--kui-color-text-inverse: #ffffff;
/* gray.60 */
--kui-color-text-neutral: #6c7489;
/* gray.70 */
--kui-color-text-neutral-strong: #52596e;
/* gray.80 */
--kui-color-text-neutral-stronger: #3a3f51;
/* gray.90 */
--kui-color-text-neutral-strongest: #232633;
/* gray.40 */
--kui-color-text-neutral-weak: #afb7c5;
/* blue.60 */
--kui-color-text-primary: #0044f4;
/* blue.70 */
--kui-color-text-primary-strong: #0030cc;
/* blue.80 */
--kui-color-text-primary-stronger: #002099;
/* green.60 */
--kui-color-text-success: #007d60;
/* yellow.60 */
--kui-color-text-warning: #995c00;
--kui-border-radius-0: 0px;
--kui-border-radius-10: 2px;
--kui-border-radius-20: 4px;
--kui-border-radius-30: 6px;
--kui-border-radius-40: 8px;
/* Used to create a circle. Value of 50% */
--kui-border-radius-circle: 50%;
/* Used to round element corners. Value of 100px */
--kui-border-radius-round: 100px;
--kui-border-width-0: 0px;
--kui-border-width-10: 1px;
--kui-border-width-20: 2px;
--kui-border-width-30: 4px;
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
--kui-breakpoint-mobile: 640px;
/* Used for tablet screens. */
--kui-breakpoint-phablet: 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
--kui-breakpoint-tablet: 1024px;
/* Used for standard desktop screens. */
--kui-breakpoint-laptop: 1280px;
/* Used for larger desktop screens. */
--kui-breakpoint-desktop: 1536px;
--kui-icon-size-10: 10px;
--kui-icon-size-20: 12px;
--kui-icon-size-30: 16px;
--kui-icon-size-40: 20px;
/* The default icon size */
--kui-icon-size-50: 24px;
--kui-icon-size-60: 32px;
--kui-icon-size-70: 40px;
--kui-icon-size-80: 48px;
/* purple.10 */
--kui-method-color-background-connect: #f1f0ff;
/* red.10 */
--kui-method-color-background-delete: #ffe5e5;
/* blue.10 */
--kui-method-color-background-get: #eefaff;
/* gray.60 */
--kui-method-color-background-head: #6c7489;
/* gray.10 */
--kui-method-color-background-options: #f9fafb;
/* aqua.10 */
--kui-method-color-background-patch: #ecfcff;
/* green.10 */
--kui-method-color-background-post: #ecfffb;
/* yellow.10 */
--kui-method-color-background-put: #fffce0;
/* pink.10 */
--kui-method-color-background-trace: #fff0f7;
/* purple.60 */
--kui-method-color-text-connect: #6f28ff;
/* red.60 */
--kui-method-color-text-delete: #d60027;
/* blue.60 */
--kui-method-color-text-get: #0044f4;
/* gray.10 */
--kui-method-color-text-head: #f9fafb;
/* gray.60 */
--kui-method-color-text-options: #6c7489;
/* aqua.60 */
--kui-method-color-text-patch: #00819d;
/* green.60 */
--kui-method-color-text-post: #007d60;
/* yellow.60 */
--kui-method-color-text-put: #995c00;
/* pink.60 */
--kui-method-color-text-trace: #d60067;
/* The standard monospace font family. */
--kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
--kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif;
--kui-font-size-10: 10px;
--kui-font-size-20: 12px;
--kui-font-size-30: 14px;
--kui-font-size-40: 16px;
--kui-font-size-50: 18px;
--kui-font-size-60: 20px;
--kui-font-size-70: 24px;
--kui-font-size-80: 32px;
--kui-font-size-90: 40px;
--kui-font-size-100: 48px;
/* 700 */
--kui-font-weight-bold: 700;
/* 500 */
--kui-font-weight-medium: 500;
/* 400: The normal font weight. */
--kui-font-weight-regular: 400;
/* 600 */
--kui-font-weight-semibold: 600;
/* 12px */
--kui-line-height-10: 12px;
/* 16px */
--kui-line-height-20: 16px;
/* 20px */
--kui-line-height-30: 20px;
/* 24px */
--kui-line-height-40: 24px;
/* 28px */
--kui-line-height-50: 28px;
/* 32px */
--kui-line-height-60: 32px;
/* 36px */
--kui-line-height-70: 36px;
/* 40px */
--kui-line-height-80: 40px;
/* 48px */
--kui-line-height-90: 48px;
/* 56px */
--kui-line-height-100: 56px;
/* 0px */
--kui-space-0: 0px;
/* 2px */
--kui-space-10: 2px;
/* 4px */
--kui-space-20: 4px;
/* 6px */
--kui-space-30: 6px;
/* 8px */
--kui-space-40: 8px;
/* 12px */
--kui-space-50: 12px;
/* 16px */
--kui-space-60: 16px;
/* 20px */
--kui-space-70: 20px;
/* 24px */
--kui-space-80: 24px;
/* 32px */
--kui-space-90: 32px;
/* 40px */
--kui-space-100: 40px;
/* 48px */
--kui-space-110: 48px;
/* 56px */
--kui-space-120: 56px;
/* 64px */
--kui-space-130: 64px;
/* 80px */
--kui-space-140: 80px;
/* 96px */
--kui-space-150: 96px;
/* auto */
--kui-space-auto: auto;
```
</details>
## JavaScript
### JavaScript / TypeScript Constants
<details>
<summary>Click to view the list of JavaScript variables</summary>
```javascript
export const KUI_COLOR_BACKGROUND = "#ffffff"; /* white */
export const KUI_COLOR_BACKGROUND_DANGER = "#d60027"; /* red.60 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONG = "#ad000e"; /* red.70 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGER = "#850000"; /* red.80 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGEST = "#5c0000"; /* red.90 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAK = "#ff3954"; /* red.40 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKER = "#ffabab"; /* red.20 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKEST = "#ffe5e5"; /* red.10 */
export const KUI_COLOR_BACKGROUND_DISABLED = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BACKGROUND_INVERSE = "#000933"; /* blue.100 */
export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489"; /* gray.60 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG = "#52596e"; /* gray.70 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER = "#3a3f51"; /* gray.80 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST = "#232633"; /* gray.90 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5"; /* gray.40 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb"; /* gray.10 */
export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4"; /* blue.60 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG = "#0030cc"; /* blue.70 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER = "#002099"; /* blue.80 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST = "#001466"; /* blue.90 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK = "#5f9aff"; /* blue.40 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER = "#bee2ff"; /* blue.20 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST = "#eefaff"; /* blue.10 */
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST = "#ecfffb"; /* green.10 */
export const KUI_COLOR_BACKGROUND_TRANSPARENT = "rgba(0, 0, 0, 0)"; /* transparent */
export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST = "#fffce0"; /* yellow.10 */
export const KUI_COLOR_BORDER = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BORDER_DANGER = "#d60027"; /* red.60 */
export const KUI_COLOR_BORDER_DANGER_STRONG = "#ad000e"; /* red.70 */
export const KUI_COLOR_BORDER_DANGER_STRONGER = "#850000"; /* red.80 */
export const KUI_COLOR_BORDER_DANGER_STRONGEST = "#5c0000"; /* red.90 */
export const KUI_COLOR_BORDER_DANGER_WEAK = "#ff3954"; /* red.40 */
export const KUI_COLOR_BORDER_DANGER_WEAKER = "#ffabab"; /* red.20 */
export const KUI_COLOR_BORDER_DANGER_WEAKEST = "#ffe5e5"; /* red.10 */
export const KUI_COLOR_BORDER_DECORATIVE = "#6f28ff"; /* purple.60 */
export const KUI_COLOR_BORDER_DISABLED = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BORDER_NEUTRAL_WEAK = "#afb7c5"; /* gray.40 */
export const KUI_COLOR_BORDER_PRIMARY = "#0044f4"; /* blue.60 */
export const KUI_COLOR_BORDER_PRIMARY_STRONG = "#0030cc"; /* blue.70 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGER = "#002099"; /* blue.80 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGEST = "#001466"; /* blue.90 */
export const KUI_COLOR_BORDER_PRIMARY_WEAK = "#5f9aff"; /* blue.40 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKER = "#bee2ff"; /* blue.20 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff"; /* blue.10 */
export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)"; /* transparent */
export const KUI_COLOR_TEXT = "#000933"; /* blue.100 */
export const KUI_COLOR_TEXT_DANGER = "#d60027"; /* red.60 */
export const KUI_COLOR_TEXT_DECORATIVE = "#00abd2"; /* aqua.50 */
export const KUI_COLOR_TEXT_DISABLED = "#828a9e"; /* gray.50 */
export const KUI_COLOR_TEXT_INVERSE = "#ffffff"; /* white */
export const KUI_COLOR_TEXT_NEUTRAL = "#6c7489"; /* gray.60 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONG = "#52596e"; /* gray.70 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGER = "#3a3f51"; /* gray.80 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST = "#232633"; /* gray.90 */
export const KUI_COLOR_TEXT_NEUTRAL_WEAK = "#afb7c5"; /* gray.40 */
export const KUI_COLOR_TEXT_PRIMARY = "#0044f4"; /* blue.60 */
export const KUI_COLOR_TEXT_PRIMARY_STRONG = "#0030cc"; /* blue.70 */
export const KUI_COLOR_TEXT_PRIMARY_STRONGER = "#002099"; /* blue.80 */
export const KUI_COLOR_TEXT_SUCCESS = "#007d60"; /* green.60 */
export const KUI_COLOR_TEXT_WARNING = "#995c00"; /* yellow.60 */
/* white */
export const KUI_COLOR_BACKGROUND = "#ffffff";
/* red.60 */
export const KUI_COLOR_BACKGROUND_DANGER = "#d60027";
/* red.70 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONG = "#ad000e";
/* red.80 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGER = "#850000";
/* red.90 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGEST = "#5c0000";
/* red.40 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAK = "#ff3954";
/* red.20 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKER = "#ffabab";
/* red.10 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKEST = "#ffe5e5";
/* gray.20 */
export const KUI_COLOR_BACKGROUND_DISABLED = "#e0e4ea";
/* blue.100 */
export const KUI_COLOR_BACKGROUND_INVERSE = "#000933";
/* gray.60 */
export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489";
/* gray.70 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG = "#52596e";
/* gray.80 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER = "#3a3f51";
/* gray.90 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST = "#232633";
/* gray.40 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5";
/* gray.20 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea";
/* gray.10 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb";
/* blue.60 */
export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4";
/* blue.70 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG = "#0030cc";
/* blue.80 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER = "#002099";
/* blue.90 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST = "#001466";
/* blue.40 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK = "#5f9aff";
/* blue.20 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER = "#bee2ff";
/* blue.10 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST = "#eefaff";
/* green.10 */
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST = "#ecfffb";
/* transparent */
export const KUI_COLOR_BACKGROUND_TRANSPARENT = "rgba(0, 0, 0, 0)";
/* yellow.10 */
export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST = "#fffce0";
/* gray.20 */
export const KUI_COLOR_BORDER = "#e0e4ea";
/* red.60 */
export const KUI_COLOR_BORDER_DANGER = "#d60027";
/* red.70 */
export const KUI_COLOR_BORDER_DANGER_STRONG = "#ad000e";
/* red.80 */
export const KUI_COLOR_BORDER_DANGER_STRONGER = "#850000";
/* red.90 */
export const KUI_COLOR_BORDER_DANGER_STRONGEST = "#5c0000";
/* red.40 */
export const KUI_COLOR_BORDER_DANGER_WEAK = "#ff3954";
/* red.20 */
export const KUI_COLOR_BORDER_DANGER_WEAKER = "#ffabab";
/* red.10 */
export const KUI_COLOR_BORDER_DANGER_WEAKEST = "#ffe5e5";
/* purple.60 */
export const KUI_COLOR_BORDER_DECORATIVE = "#6f28ff";
/* gray.20 */
export const KUI_COLOR_BORDER_DISABLED = "#e0e4ea";
/* gray.40 */
export const KUI_COLOR_BORDER_NEUTRAL_WEAK = "#afb7c5";
/* blue.60 */
export const KUI_COLOR_BORDER_PRIMARY = "#0044f4";
/* blue.70 */
export const KUI_COLOR_BORDER_PRIMARY_STRONG = "#0030cc";
/* blue.80 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGER = "#002099";
/* blue.90 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGEST = "#001466";
/* blue.40 */
export const KUI_COLOR_BORDER_PRIMARY_WEAK = "#5f9aff";
/* blue.20 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKER = "#bee2ff";
/* blue.10 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff";
/* transparent */
export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)";
/* blue.100 */
export const KUI_COLOR_TEXT = "#000933";
/* red.60 */
export const KUI_COLOR_TEXT_DANGER = "#d60027";
/* aqua.50 */
export const KUI_COLOR_TEXT_DECORATIVE = "#00abd2";
/* gray.50 */
export const KUI_COLOR_TEXT_DISABLED = "#828a9e";
/* white */
export const KUI_COLOR_TEXT_INVERSE = "#ffffff";
/* gray.60 */
export const KUI_COLOR_TEXT_NEUTRAL = "#6c7489";
/* gray.70 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONG = "#52596e";
/* gray.80 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGER = "#3a3f51";
/* gray.90 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST = "#232633";
/* gray.40 */
export const KUI_COLOR_TEXT_NEUTRAL_WEAK = "#afb7c5";
/* blue.60 */
export const KUI_COLOR_TEXT_PRIMARY = "#0044f4";
/* blue.70 */
export const KUI_COLOR_TEXT_PRIMARY_STRONG = "#0030cc";
/* blue.80 */
export const KUI_COLOR_TEXT_PRIMARY_STRONGER = "#002099";
/* green.60 */
export const KUI_COLOR_TEXT_SUCCESS = "#007d60";
/* yellow.60 */
export const KUI_COLOR_TEXT_WARNING = "#995c00";
export const KUI_BORDER_RADIUS_0 = "0px";

@@ -251,4 +1275,6 @@ export const KUI_BORDER_RADIUS_10 = "2px";

export const KUI_BORDER_RADIUS_40 = "8px";
export const KUI_BORDER_RADIUS_CIRCLE = "50%"; /* Used to create a circle. Value of 50% */
export const KUI_BORDER_RADIUS_ROUND = "100px"; /* Used to round element corners. Value of 100px */
/* Used to create a circle. Value of 50% */
export const KUI_BORDER_RADIUS_CIRCLE = "50%";
/* Used to round element corners. Value of 100px */
export const KUI_BORDER_RADIUS_ROUND = "100px";
export const KUI_BORDER_WIDTH_0 = "0px";

@@ -258,7 +1284,12 @@ export const KUI_BORDER_WIDTH_10 = "1px";

export const KUI_BORDER_WIDTH_30 = "4px";
export const KUI_BREAKPOINT_MOBILE = "640px"; /* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
export const KUI_BREAKPOINT_PHABLET = "768px"; /* Used for tablet screens. */
export const KUI_BREAKPOINT_TABLET = "1024px"; /* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
export const KUI_BREAKPOINT_LAPTOP = "1280px"; /* Used for standard desktop screens. */
export const KUI_BREAKPOINT_DESKTOP = "1536px"; /* Used for larger desktop screens. */
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
export const KUI_BREAKPOINT_MOBILE = "640px";
/* Used for tablet screens. */
export const KUI_BREAKPOINT_PHABLET = "768px";
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
export const KUI_BREAKPOINT_TABLET = "1024px";
/* Used for standard desktop screens. */
export const KUI_BREAKPOINT_LAPTOP = "1280px";
/* Used for larger desktop screens. */
export const KUI_BREAKPOINT_DESKTOP = "1536px";
export const KUI_ICON_SIZE_10 = "10px";

@@ -268,26 +1299,47 @@ export const KUI_ICON_SIZE_20 = "12px";

export const KUI_ICON_SIZE_40 = "20px";
export const KUI_ICON_SIZE_50 = "24px"; /* The default icon size */
/* The default icon size */
export const KUI_ICON_SIZE_50 = "24px";
export const KUI_ICON_SIZE_60 = "32px";
export const KUI_ICON_SIZE_70 = "40px";
export const KUI_ICON_SIZE_80 = "48px";
export const KUI_METHOD_COLOR_BACKGROUND_CONNECT = "#f1f0ff"; /* purple.10 */
export const KUI_METHOD_COLOR_BACKGROUND_DELETE = "#ffe5e5"; /* red.10 */
export const KUI_METHOD_COLOR_BACKGROUND_GET = "#eefaff"; /* blue.10 */
export const KUI_METHOD_COLOR_BACKGROUND_HEAD = "#6c7489"; /* gray.60 */
export const KUI_METHOD_COLOR_BACKGROUND_OPTIONS = "#f9fafb"; /* gray.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PATCH = "#ecfcff"; /* aqua.10 */
export const KUI_METHOD_COLOR_BACKGROUND_POST = "#ecfffb"; /* green.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PUT = "#fffce0"; /* yellow.10 */
export const KUI_METHOD_COLOR_BACKGROUND_TRACE = "#fff0f7"; /* pink.10 */
export const KUI_METHOD_COLOR_TEXT_CONNECT = "#6f28ff"; /* purple.60 */
export const KUI_METHOD_COLOR_TEXT_DELETE = "#d60027"; /* red.60 */
export const KUI_METHOD_COLOR_TEXT_GET = "#0044f4"; /* blue.60 */
export const KUI_METHOD_COLOR_TEXT_HEAD = "#f9fafb"; /* gray.10 */
export const KUI_METHOD_COLOR_TEXT_OPTIONS = "#6c7489"; /* gray.60 */
export const KUI_METHOD_COLOR_TEXT_PATCH = "#00819d"; /* aqua.60 */
export const KUI_METHOD_COLOR_TEXT_POST = "#007d60"; /* green.60 */
export const KUI_METHOD_COLOR_TEXT_PUT = "#995c00"; /* yellow.60 */
export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067"; /* pink.60 */
export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace"; /* The standard monospace font family. */
export const KUI_FONT_FAMILY_TEXT = "'Inter', Roboto, Helvetica, sans-serif"; /* The standard text font family. */
/* purple.10 */
export const KUI_METHOD_COLOR_BACKGROUND_CONNECT = "#f1f0ff";
/* red.10 */
export const KUI_METHOD_COLOR_BACKGROUND_DELETE = "#ffe5e5";
/* blue.10 */
export const KUI_METHOD_COLOR_BACKGROUND_GET = "#eefaff";
/* gray.60 */
export const KUI_METHOD_COLOR_BACKGROUND_HEAD = "#6c7489";
/* gray.10 */
export const KUI_METHOD_COLOR_BACKGROUND_OPTIONS = "#f9fafb";
/* aqua.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PATCH = "#ecfcff";
/* green.10 */
export const KUI_METHOD_COLOR_BACKGROUND_POST = "#ecfffb";
/* yellow.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PUT = "#fffce0";
/* pink.10 */
export const KUI_METHOD_COLOR_BACKGROUND_TRACE = "#fff0f7";
/* purple.60 */
export const KUI_METHOD_COLOR_TEXT_CONNECT = "#6f28ff";
/* red.60 */
export const KUI_METHOD_COLOR_TEXT_DELETE = "#d60027";
/* blue.60 */
export const KUI_METHOD_COLOR_TEXT_GET = "#0044f4";
/* gray.10 */
export const KUI_METHOD_COLOR_TEXT_HEAD = "#f9fafb";
/* gray.60 */
export const KUI_METHOD_COLOR_TEXT_OPTIONS = "#6c7489";
/* aqua.60 */
export const KUI_METHOD_COLOR_TEXT_PATCH = "#00819d";
/* green.60 */
export const KUI_METHOD_COLOR_TEXT_POST = "#007d60";
/* yellow.60 */
export const KUI_METHOD_COLOR_TEXT_PUT = "#995c00";
/* pink.60 */
export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067";
/* The standard monospace font family. */
export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace";
/* The standard text font family. */
export const KUI_FONT_FAMILY_TEXT = "'Inter', Roboto, Helvetica, sans-serif";
export const KUI_FONT_SIZE_10 = "10px";

@@ -303,33 +1355,64 @@ export const KUI_FONT_SIZE_20 = "12px";

export const KUI_FONT_SIZE_100 = "48px";
export const KUI_FONT_WEIGHT_BOLD = "700"; /* 700 */
export const KUI_FONT_WEIGHT_MEDIUM = "500"; /* 500 */
export const KUI_FONT_WEIGHT_REGULAR = "400"; /* 400: The normal font weight. */
export const KUI_FONT_WEIGHT_SEMIBOLD = "600"; /* 600 */
export const KUI_LINE_HEIGHT_10 = "12px"; /* 12px */
export const KUI_LINE_HEIGHT_20 = "16px"; /* 16px */
export const KUI_LINE_HEIGHT_30 = "20px"; /* 20px */
export const KUI_LINE_HEIGHT_40 = "24px"; /* 24px */
export const KUI_LINE_HEIGHT_50 = "28px"; /* 28px */
export const KUI_LINE_HEIGHT_60 = "32px"; /* 32px */
export const KUI_LINE_HEIGHT_70 = "36px"; /* 36px */
export const KUI_LINE_HEIGHT_80 = "40px"; /* 40px */
export const KUI_LINE_HEIGHT_90 = "48px"; /* 48px */
export const KUI_LINE_HEIGHT_100 = "56px"; /* 56px */
export const KUI_SPACE_0 = "0px"; /* 0px */
export const KUI_SPACE_10 = "2px"; /* 2px */
export const KUI_SPACE_20 = "4px"; /* 4px */
export const KUI_SPACE_30 = "6px"; /* 6px */
export const KUI_SPACE_40 = "8px"; /* 8px */
export const KUI_SPACE_50 = "12px"; /* 12px */
export const KUI_SPACE_60 = "16px"; /* 16px */
export const KUI_SPACE_70 = "20px"; /* 20px */
export const KUI_SPACE_80 = "24px"; /* 24px */
export const KUI_SPACE_90 = "32px"; /* 32px */
export const KUI_SPACE_100 = "40px"; /* 40px */
export const KUI_SPACE_110 = "48px"; /* 48px */
export const KUI_SPACE_120 = "56px"; /* 56px */
export const KUI_SPACE_130 = "64px"; /* 64px */
export const KUI_SPACE_140 = "80px"; /* 80px */
export const KUI_SPACE_150 = "96px"; /* 96px */
export const KUI_SPACE_AUTO = "auto"; /* auto */
/* 700 */
export const KUI_FONT_WEIGHT_BOLD = "700";
/* 500 */
export const KUI_FONT_WEIGHT_MEDIUM = "500";
/* 400: The normal font weight. */
export const KUI_FONT_WEIGHT_REGULAR = "400";
/* 600 */
export const KUI_FONT_WEIGHT_SEMIBOLD = "600";
/* 12px */
export const KUI_LINE_HEIGHT_10 = "12px";
/* 16px */
export const KUI_LINE_HEIGHT_20 = "16px";
/* 20px */
export const KUI_LINE_HEIGHT_30 = "20px";
/* 24px */
export const KUI_LINE_HEIGHT_40 = "24px";
/* 28px */
export const KUI_LINE_HEIGHT_50 = "28px";
/* 32px */
export const KUI_LINE_HEIGHT_60 = "32px";
/* 36px */
export const KUI_LINE_HEIGHT_70 = "36px";
/* 40px */
export const KUI_LINE_HEIGHT_80 = "40px";
/* 48px */
export const KUI_LINE_HEIGHT_90 = "48px";
/* 56px */
export const KUI_LINE_HEIGHT_100 = "56px";
/* 0px */
export const KUI_SPACE_0 = "0px";
/* 2px */
export const KUI_SPACE_10 = "2px";
/* 4px */
export const KUI_SPACE_20 = "4px";
/* 6px */
export const KUI_SPACE_30 = "6px";
/* 8px */
export const KUI_SPACE_40 = "8px";
/* 12px */
export const KUI_SPACE_50 = "12px";
/* 16px */
export const KUI_SPACE_60 = "16px";
/* 20px */
export const KUI_SPACE_70 = "20px";
/* 24px */
export const KUI_SPACE_80 = "24px";
/* 32px */
export const KUI_SPACE_90 = "32px";
/* 40px */
export const KUI_SPACE_100 = "40px";
/* 48px */
export const KUI_SPACE_110 = "48px";
/* 56px */
export const KUI_SPACE_120 = "56px";
/* 64px */
export const KUI_SPACE_130 = "64px";
/* 80px */
export const KUI_SPACE_140 = "80px";
/* 96px */
export const KUI_SPACE_150 = "96px";
/* auto */
export const KUI_SPACE_AUTO = "auto";
```

@@ -339,167 +1422,159 @@

## CSS Variables
### JSON
**IMPORTANT**: You should **never** import the `@kong/design-tokens/tokens/css/variables.css` file in your host project.
While CSS variables are _utilized_ in Kong's repositories to allow for CSS customization, the variables themselves are never actually provided values or imported from this package.
The purpose of the `@kong/design-tokens/tokens/css/variables.css` file is to provide a list of all available CSS variables, to utilize alongside auto-complete extensions in your IDE, etc.
If you want to customize default token values, provided the element(s) in question utilize CSS variable fallbacks, simply set the variables from this list to your desired value within your host application, scoped inside your desired CSS selector, and it will override the default value.
You may scope your CSS variable overrides inside the `:root` selector as shown here, or inside any other valid CSS selector.
<details>
<summary>Click to view the list of CSS variables</summary>
<summary>Click to view the exported JSON object</summary>
```scss
--kui-color-background: initial; /* white. Default value: `#ffffff` */
--kui-color-background-danger: initial; /* red.60. Default value: `#d60027` */
--kui-color-background-danger-strong: initial; /* red.70. Default value: `#ad000e` */
--kui-color-background-danger-stronger: initial; /* red.80. Default value: `#850000` */
--kui-color-background-danger-strongest: initial; /* red.90. Default value: `#5c0000` */
--kui-color-background-danger-weak: initial; /* red.40. Default value: `#ff3954` */
--kui-color-background-danger-weaker: initial; /* red.20. Default value: `#ffabab` */
--kui-color-background-danger-weakest: initial; /* red.10. Default value: `#ffe5e5` */
--kui-color-background-disabled: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-background-inverse: initial; /* blue.100. Default value: `#000933` */
--kui-color-background-neutral: initial; /* gray.60. Default value: `#6c7489` */
--kui-color-background-neutral-strong: initial; /* gray.70. Default value: `#52596e` */
--kui-color-background-neutral-stronger: initial; /* gray.80. Default value: `#3a3f51` */
--kui-color-background-neutral-strongest: initial; /* gray.90. Default value: `#232633` */
--kui-color-background-neutral-weak: initial; /* gray.40. Default value: `#afb7c5` */
--kui-color-background-neutral-weaker: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-background-neutral-weakest: initial; /* gray.10. Default value: `#f9fafb` */
--kui-color-background-primary: initial; /* blue.60. Default value: `#0044f4` */
--kui-color-background-primary-strong: initial; /* blue.70. Default value: `#0030cc` */
--kui-color-background-primary-stronger: initial; /* blue.80. Default value: `#002099` */
--kui-color-background-primary-strongest: initial; /* blue.90. Default value: `#001466` */
--kui-color-background-primary-weak: initial; /* blue.40. Default value: `#5f9aff` */
--kui-color-background-primary-weaker: initial; /* blue.20. Default value: `#bee2ff` */
--kui-color-background-primary-weakest: initial; /* blue.10. Default value: `#eefaff` */
--kui-color-background-success-weakest: initial; /* green.10. Default value: `#ecfffb` */
--kui-color-background-transparent: initial; /* transparent. Default value: `rgba(0, 0, 0, 0)` */
--kui-color-background-warning-weakest: initial; /* yellow.10. Default value: `#fffce0` */
--kui-color-border: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-border-danger: initial; /* red.60. Default value: `#d60027` */
--kui-color-border-danger-strong: initial; /* red.70. Default value: `#ad000e` */
--kui-color-border-danger-stronger: initial; /* red.80. Default value: `#850000` */
--kui-color-border-danger-strongest: initial; /* red.90. Default value: `#5c0000` */
--kui-color-border-danger-weak: initial; /* red.40. Default value: `#ff3954` */
--kui-color-border-danger-weaker: initial; /* red.20. Default value: `#ffabab` */
--kui-color-border-danger-weakest: initial; /* red.10. Default value: `#ffe5e5` */
--kui-color-border-decorative: initial; /* purple.60. Default value: `#6f28ff` */
--kui-color-border-disabled: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-border-neutral-weak: initial; /* gray.40. Default value: `#afb7c5` */
--kui-color-border-primary: initial; /* blue.60. Default value: `#0044f4` */
--kui-color-border-primary-strong: initial; /* blue.70. Default value: `#0030cc` */
--kui-color-border-primary-stronger: initial; /* blue.80. Default value: `#002099` */
--kui-color-border-primary-strongest: initial; /* blue.90. Default value: `#001466` */
--kui-color-border-primary-weak: initial; /* blue.40. Default value: `#5f9aff` */
--kui-color-border-primary-weaker: initial; /* blue.20. Default value: `#bee2ff` */
--kui-color-border-primary-weakest: initial; /* blue.10. Default value: `#eefaff` */
--kui-color-border-transparent: initial; /* transparent. Default value: `rgba(0, 0, 0, 0)` */
--kui-color-text: initial; /* blue.100. Default value: `#000933` */
--kui-color-text-danger: initial; /* red.60. Default value: `#d60027` */
--kui-color-text-decorative: initial; /* aqua.50. Default value: `#00abd2` */
--kui-color-text-disabled: initial; /* gray.50. Default value: `#828a9e` */
--kui-color-text-inverse: initial; /* white. Default value: `#ffffff` */
--kui-color-text-neutral: initial; /* gray.60. Default value: `#6c7489` */
--kui-color-text-neutral-strong: initial; /* gray.70. Default value: `#52596e` */
--kui-color-text-neutral-stronger: initial; /* gray.80. Default value: `#3a3f51` */
--kui-color-text-neutral-strongest: initial; /* gray.90. Default value: `#232633` */
--kui-color-text-neutral-weak: initial; /* gray.40. Default value: `#afb7c5` */
--kui-color-text-primary: initial; /* blue.60. Default value: `#0044f4` */
--kui-color-text-primary-strong: initial; /* blue.70. Default value: `#0030cc` */
--kui-color-text-primary-stronger: initial; /* blue.80. Default value: `#002099` */
--kui-color-text-success: initial; /* green.60. Default value: `#007d60` */
--kui-color-text-warning: initial; /* yellow.60. Default value: `#995c00` */
--kui-border-radius-0: initial; /* Default value: `0px` */
--kui-border-radius-10: initial; /* Default value: `2px` */
--kui-border-radius-20: initial; /* Default value: `4px` */
--kui-border-radius-30: initial; /* Default value: `6px` */
--kui-border-radius-40: initial; /* Default value: `8px` */
--kui-border-radius-circle: initial; /* Used to create a circle. Value of 50%. Default value: `50%` */
--kui-border-radius-round: initial; /* Used to round element corners. Value of 100px. Default value: `100px` */
--kui-border-width-0: initial; /* Default value: `0px` */
--kui-border-width-10: initial; /* Default value: `1px` */
--kui-border-width-20: initial; /* Default value: `2px` */
--kui-border-width-30: initial; /* Default value: `4px` */
--kui-breakpoint-mobile: initial; /* Used for larger mobile screens. Anything viewport width under this value is considered mobile. Default value: `640px` */
--kui-breakpoint-phablet: initial; /* Used for tablet screens. Default value: `768px` */
--kui-breakpoint-tablet: initial; /* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. Default value: `1024px` */
--kui-breakpoint-laptop: initial; /* Used for standard desktop screens. Default value: `1280px` */
--kui-breakpoint-desktop: initial; /* Used for larger desktop screens. Default value: `1536px` */
--kui-icon-size-10: initial; /* Default value: `10px` */
--kui-icon-size-20: initial; /* Default value: `12px` */
--kui-icon-size-30: initial; /* Default value: `16px` */
--kui-icon-size-40: initial; /* Default value: `20px` */
--kui-icon-size-50: initial; /* The default icon size. Default value: `24px` */
--kui-icon-size-60: initial; /* Default value: `32px` */
--kui-icon-size-70: initial; /* Default value: `40px` */
--kui-icon-size-80: initial; /* Default value: `48px` */
--kui-method-color-background-connect: initial; /* purple.10. Default value: `#f1f0ff` */
--kui-method-color-background-delete: initial; /* red.10. Default value: `#ffe5e5` */
--kui-method-color-background-get: initial; /* blue.10. Default value: `#eefaff` */
--kui-method-color-background-head: initial; /* gray.60. Default value: `#6c7489` */
--kui-method-color-background-options: initial; /* gray.10. Default value: `#f9fafb` */
--kui-method-color-background-patch: initial; /* aqua.10. Default value: `#ecfcff` */
--kui-method-color-background-post: initial; /* green.10. Default value: `#ecfffb` */
--kui-method-color-background-put: initial; /* yellow.10. Default value: `#fffce0` */
--kui-method-color-background-trace: initial; /* pink.10. Default value: `#fff0f7` */
--kui-method-color-text-connect: initial; /* purple.60. Default value: `#6f28ff` */
--kui-method-color-text-delete: initial; /* red.60. Default value: `#d60027` */
--kui-method-color-text-get: initial; /* blue.60. Default value: `#0044f4` */
--kui-method-color-text-head: initial; /* gray.10. Default value: `#f9fafb` */
--kui-method-color-text-options: initial; /* gray.60. Default value: `#6c7489` */
--kui-method-color-text-patch: initial; /* aqua.60. Default value: `#00819d` */
--kui-method-color-text-post: initial; /* green.60. Default value: `#007d60` */
--kui-method-color-text-put: initial; /* yellow.60. Default value: `#995c00` */
--kui-method-color-text-trace: initial; /* pink.60. Default value: `#d60067` */
--kui-font-family-code: initial; /* The standard monospace font family. Default value: `'JetBrains Mono', Consolas, monospace` */
--kui-font-family-text: initial; /* The standard text font family. Default value: `'Inter', Roboto, Helvetica, sans-serif` */
--kui-font-size-10: initial; /* Default value: `10px` */
--kui-font-size-20: initial; /* Default value: `12px` */
--kui-font-size-30: initial; /* Default value: `14px` */
--kui-font-size-40: initial; /* Default value: `16px` */
--kui-font-size-50: initial; /* Default value: `18px` */
--kui-font-size-60: initial; /* Default value: `20px` */
--kui-font-size-70: initial; /* Default value: `24px` */
--kui-font-size-80: initial; /* Default value: `32px` */
--kui-font-size-90: initial; /* Default value: `40px` */
--kui-font-size-100: initial; /* Default value: `48px` */
--kui-font-weight-bold: initial; /* 700. Default value: `700` */
--kui-font-weight-medium: initial; /* 500. Default value: `500` */
--kui-font-weight-regular: initial; /* 400: The normal font weight. Default value: `400` */
--kui-font-weight-semibold: initial; /* 600. Default value: `600` */
--kui-line-height-10: initial; /* 12px. Default value: `12px` */
--kui-line-height-20: initial; /* 16px. Default value: `16px` */
--kui-line-height-30: initial; /* 20px. Default value: `20px` */
--kui-line-height-40: initial; /* 24px. Default value: `24px` */
--kui-line-height-50: initial; /* 28px. Default value: `28px` */
--kui-line-height-60: initial; /* 32px. Default value: `32px` */
--kui-line-height-70: initial; /* 36px. Default value: `36px` */
--kui-line-height-80: initial; /* 40px. Default value: `40px` */
--kui-line-height-90: initial; /* 48px. Default value: `48px` */
--kui-line-height-100: initial; /* 56px. Default value: `56px` */
--kui-space-0: initial; /* 0px. Default value: `0px` */
--kui-space-10: initial; /* 2px. Default value: `2px` */
--kui-space-20: initial; /* 4px. Default value: `4px` */
--kui-space-30: initial; /* 6px. Default value: `6px` */
--kui-space-40: initial; /* 8px. Default value: `8px` */
--kui-space-50: initial; /* 12px. Default value: `12px` */
--kui-space-60: initial; /* 16px. Default value: `16px` */
--kui-space-70: initial; /* 20px. Default value: `20px` */
--kui-space-80: initial; /* 24px. Default value: `24px` */
--kui-space-90: initial; /* 32px. Default value: `32px` */
--kui-space-100: initial; /* 40px. Default value: `40px` */
--kui-space-110: initial; /* 48px. Default value: `48px` */
--kui-space-120: initial; /* 56px. Default value: `56px` */
--kui-space-130: initial; /* 64px. Default value: `64px` */
--kui-space-140: initial; /* 80px. Default value: `80px` */
--kui-space-150: initial; /* 96px. Default value: `96px` */
--kui-space-auto: initial; /* auto. Default value: `auto` */
```json
{
"kui-color-background": "#ffffff",
"kui-color-background-danger": "#d60027",
"kui-color-background-danger-strong": "#ad000e",
"kui-color-background-danger-stronger": "#850000",
"kui-color-background-danger-strongest": "#5c0000",
"kui-color-background-danger-weak": "#ff3954",
"kui-color-background-danger-weaker": "#ffabab",
"kui-color-background-danger-weakest": "#ffe5e5",
"kui-color-background-disabled": "#e0e4ea",
"kui-color-background-inverse": "#000933",
"kui-color-background-neutral": "#6c7489",
"kui-color-background-neutral-strong": "#52596e",
"kui-color-background-neutral-stronger": "#3a3f51",
"kui-color-background-neutral-strongest": "#232633",
"kui-color-background-neutral-weak": "#afb7c5",
"kui-color-background-neutral-weaker": "#e0e4ea",
"kui-color-background-neutral-weakest": "#f9fafb",
"kui-color-background-primary": "#0044f4",
"kui-color-background-primary-strong": "#0030cc",
"kui-color-background-primary-stronger": "#002099",
"kui-color-background-primary-strongest": "#001466",
"kui-color-background-primary-weak": "#5f9aff",
"kui-color-background-primary-weaker": "#bee2ff",
"kui-color-background-primary-weakest": "#eefaff",
"kui-color-background-success-weakest": "#ecfffb",
"kui-color-background-transparent": "rgba(0, 0, 0, 0)",
"kui-color-background-warning-weakest": "#fffce0",
"kui-color-border": "#e0e4ea",
"kui-color-border-danger": "#d60027",
"kui-color-border-danger-strong": "#ad000e",
"kui-color-border-danger-stronger": "#850000",
"kui-color-border-danger-strongest": "#5c0000",
"kui-color-border-danger-weak": "#ff3954",
"kui-color-border-danger-weaker": "#ffabab",
"kui-color-border-danger-weakest": "#ffe5e5",
"kui-color-border-decorative": "#6f28ff",
"kui-color-border-disabled": "#e0e4ea",
"kui-color-border-neutral-weak": "#afb7c5",
"kui-color-border-primary": "#0044f4",
"kui-color-border-primary-strong": "#0030cc",
"kui-color-border-primary-stronger": "#002099",
"kui-color-border-primary-strongest": "#001466",
"kui-color-border-primary-weak": "#5f9aff",
"kui-color-border-primary-weaker": "#bee2ff",
"kui-color-border-primary-weakest": "#eefaff",
"kui-color-border-transparent": "rgba(0, 0, 0, 0)",
"kui-color-text": "#000933",
"kui-color-text-danger": "#d60027",
"kui-color-text-decorative": "#00abd2",
"kui-color-text-disabled": "#828a9e",
"kui-color-text-inverse": "#ffffff",
"kui-color-text-neutral": "#6c7489",
"kui-color-text-neutral-strong": "#52596e",
"kui-color-text-neutral-stronger": "#3a3f51",
"kui-color-text-neutral-strongest": "#232633",
"kui-color-text-neutral-weak": "#afb7c5",
"kui-color-text-primary": "#0044f4",
"kui-color-text-primary-strong": "#0030cc",
"kui-color-text-primary-stronger": "#002099",
"kui-color-text-success": "#007d60",
"kui-color-text-warning": "#995c00",
"kui-border-radius-0": "0px",
"kui-border-radius-10": "2px",
"kui-border-radius-20": "4px",
"kui-border-radius-30": "6px",
"kui-border-radius-40": "8px",
"kui-border-radius-circle": "50%",
"kui-border-radius-round": "100px",
"kui-border-width-0": "0px",
"kui-border-width-10": "1px",
"kui-border-width-20": "2px",
"kui-border-width-30": "4px",
"kui-breakpoint-mobile": "640px",
"kui-breakpoint-phablet": "768px",
"kui-breakpoint-tablet": "1024px",
"kui-breakpoint-laptop": "1280px",
"kui-breakpoint-desktop": "1536px",
"kui-icon-size-10": "10px",
"kui-icon-size-20": "12px",
"kui-icon-size-30": "16px",
"kui-icon-size-40": "20px",
"kui-icon-size-50": "24px",
"kui-icon-size-60": "32px",
"kui-icon-size-70": "40px",
"kui-icon-size-80": "48px",
"kui-method-color-background-connect": "#f1f0ff",
"kui-method-color-background-delete": "#ffe5e5",
"kui-method-color-background-get": "#eefaff",
"kui-method-color-background-head": "#6c7489",
"kui-method-color-background-options": "#f9fafb",
"kui-method-color-background-patch": "#ecfcff",
"kui-method-color-background-post": "#ecfffb",
"kui-method-color-background-put": "#fffce0",
"kui-method-color-background-trace": "#fff0f7",
"kui-method-color-text-connect": "#6f28ff",
"kui-method-color-text-delete": "#d60027",
"kui-method-color-text-get": "#0044f4",
"kui-method-color-text-head": "#f9fafb",
"kui-method-color-text-options": "#6c7489",
"kui-method-color-text-patch": "#00819d",
"kui-method-color-text-post": "#007d60",
"kui-method-color-text-put": "#995c00",
"kui-method-color-text-trace": "#d60067",
"kui-font-family-code": "'JetBrains Mono', Consolas, monospace",
"kui-font-family-text": "'Inter', Roboto, Helvetica, sans-serif",
"kui-font-size-10": "10px",
"kui-font-size-20": "12px",
"kui-font-size-30": "14px",
"kui-font-size-40": "16px",
"kui-font-size-50": "18px",
"kui-font-size-60": "20px",
"kui-font-size-70": "24px",
"kui-font-size-80": "32px",
"kui-font-size-90": "40px",
"kui-font-size-100": "48px",
"kui-font-weight-bold": "700",
"kui-font-weight-medium": "500",
"kui-font-weight-regular": "400",
"kui-font-weight-semibold": "600",
"kui-line-height-10": "12px",
"kui-line-height-20": "16px",
"kui-line-height-30": "20px",
"kui-line-height-40": "24px",
"kui-line-height-50": "28px",
"kui-line-height-60": "32px",
"kui-line-height-70": "36px",
"kui-line-height-80": "40px",
"kui-line-height-90": "48px",
"kui-line-height-100": "56px",
"kui-space-0": "0px",
"kui-space-10": "2px",
"kui-space-20": "4px",
"kui-space-30": "6px",
"kui-space-40": "8px",
"kui-space-50": "12px",
"kui-space-60": "16px",
"kui-space-70": "20px",
"kui-space-80": "24px",
"kui-space-90": "32px",
"kui-space-100": "40px",
"kui-space-110": "48px",
"kui-space-120": "56px",
"kui-space-130": "64px",
"kui-space-140": "80px",
"kui-space-150": "96px",
"kui-space-auto": "auto"
}
```
</details>

8

package.json
{
"name": "@kong/design-tokens",
"version": "1.6.2",
"version": "1.7.0",
"description": "Kong UI Design Tokens and style dictionary",

@@ -14,2 +14,5 @@ "scripts": {

"watch:tokens": "yarn build && chokidar \"tokens/**/*.json\" -c \"yarn build\"",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs",
"semantic-release": "semantic-release",

@@ -80,4 +83,5 @@ "prepublishOnly": "npm run build",

"typescript": "^5.1.6",
"vite": "^4.4.2",
"vite": "^4.4.3",
"vite-plugin-restart": "^0.3.1",
"vitepress": "^1.0.0-beta.5",
"vue": "^3.3.4",

@@ -84,0 +88,0 @@ "vue-router": "^4.2.4"

74

README.md

@@ -9,5 +9,6 @@ # Kong UI Design Tokens

- [Token Formats](#token-formats)
- [SCSS Variables](#scss-variables)
- [JavaScript Variables](#javascript-variables)
- [CSS Variables](#css-variables)
- [SCSS](#scss)
- [LESS](#less)
- [JavaScript](#javascript)
- [CSS Custom Properties](#css-custom-properties)
- [Usage](#usage)

@@ -48,4 +49,6 @@ - [Installation](#installation)

### SCSS Variables
### SCSS
#### SCSS Variables
SCSS variables can be utilized in your project's SCSS files or in-component style blocks (this assumes your app is already configured to compile Sass).

@@ -55,3 +58,3 @@

#### Import into your app or component's stylesheet or style block
##### Import into your app or component's stylesheet or style block

@@ -62,3 +65,3 @@ ```scss

#### Globally import with Vite
##### Globally import with Vite

@@ -83,4 +86,25 @@ If your component or application utilizes [Vite](https://vitejs.dev/) to build and compile, you may add the following configuration to your `vite.config.ts` to import the SCSS variables into all components within your project

### JavaScript Variables
#### SCSS Map
The package also exports a SCSS map of the tokens from the `@kong/design-tokens/tokens/scss/map` file
```scss
$tokens-map: (
'kui-color-background': #ffffff,
// ... etc.
);
```
### LESS
#### LESS Variables
LESS variables can be utilized in your project's LESS files or in-component style blocks (this assumes your app is already configured to compile LESS).
To use the LESS variables, you need to import them into your component or app stylesheet so they are available throughout your project via the export from `@kong/design-tokens/tokens/less/variables.less`.
### JavaScript
#### JavaScript Variables
JavaScript variables can be utilized in your project's component files, or other JavaScript/TypeScript files.

@@ -95,14 +119,28 @@

### CSS Variables
#### JSON
**IMPORTANT**: You should **never** import the `@kong/design-tokens/tokens/css/variables.css` file in your host project.
The package also exports a JSON file of all tokens from `@kong/design-tokens/tokens/js/tokens.json`
While CSS variables are _utilized_ in Kong's repositories to allow for CSS customization, the variables themselves are never actually provided values or imported from this package.
### CSS Custom Properties
The purpose of the `@kong/design-tokens/tokens/css/variables.css` file is to provide a list of all available CSS variables, to utilize alongside auto-complete extensions in your IDE, etc.
You may scope your CSS variable overrides inside the `:root` selector as shown here, or inside any other valid CSS selector.
If you want to customize default token values, provided the element(s) in question utilize CSS variable fallbacks, simply set the variables from this list to your desired value within your host application, scoped inside your desired CSS selector, and it will override the default value.
Two versions of the [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are exported from the package.
You may scope your CSS variable overrides inside the `:root` selector as shown here, or inside any other valid CSS selector.
#### `@kong/design-tokens/tokens/css/custom-properties.css`
This file exports all available custom properties with the values set to their actual raw value.
#### `@kong/design-tokens/tokens/css/custom-properties-list.css`
This file exports the custom properties with a value of `initial`; mainly used for IDE auto-completion where you do not actually need the token values.
> **IMPORTANT**: You should **never** import the `@kong/design-tokens/tokens/css/custom-properties-list.css` file in your host project.
>
> While CSS variables are _utilized_ in Kong's repositories to allow for CSS customization, the variables themselves are never actually provided values or imported from this package.
>
> The purpose of the `@kong/design-tokens/tokens/css/custom-properties-list.css` file is to provide a list of all available CSS variables, to utilize alongside auto-complete extensions in your IDE, etc.
>
> If you want to customize default token values, provided the element(s) in question utilize CSS variable fallbacks, simply set the variables from this list to your desired value within your host application, scoped inside your desired CSS selector, and it will override the default value.
```html

@@ -173,10 +211,10 @@ <style>

/**
* When setting a CSS variable value to a SCSS variable, you need to
* interpolate the SCSS variable. Interpolation can be used
* almost anywhere in a Sass stylesheet to embed the result of a
* SassScript expression into a chunk of CSS.
* When setting a CSS variable value to a SCSS variable, you need to
* interpolate the SCSS variable. Interpolation can be used
* almost anywhere in a Sass stylesheet to embed the result of a
* SassScript expression into a chunk of CSS.
* Just wrap the expression in `#{}`
*/
--my-custom-scoped-css-variable: var(--kui-space-20, #{$kui-space-20});
margin: var(--my-custom-scoped-css-variable, #{$kui-space-10});

@@ -183,0 +221,0 @@ color: var(--kui-color-text-primary, $kui-color-text-primary);

1879

TOKENS.md
<!--
* Do not edit directly
* Generated on Thu, 20 Jul 2023 21:02:45 GMT
* Generated on Fri, 21 Jul 2023 21:38:30 GMT
*

@@ -14,4 +14,6 @@ * Kong Design Tokens

## SCSS Variables
## SCSS
### SCSS Variables
<details>

@@ -22,63 +24,124 @@

```scss
$kui-color-background: #ffffff; /* white */
$kui-color-background-danger: #d60027; /* red.60 */
$kui-color-background-danger-strong: #ad000e; /* red.70 */
$kui-color-background-danger-stronger: #850000; /* red.80 */
$kui-color-background-danger-strongest: #5c0000; /* red.90 */
$kui-color-background-danger-weak: #ff3954; /* red.40 */
$kui-color-background-danger-weaker: #ffabab; /* red.20 */
$kui-color-background-danger-weakest: #ffe5e5; /* red.10 */
$kui-color-background-disabled: #e0e4ea; /* gray.20 */
$kui-color-background-inverse: #000933; /* blue.100 */
$kui-color-background-neutral: #6c7489; /* gray.60 */
$kui-color-background-neutral-strong: #52596e; /* gray.70 */
$kui-color-background-neutral-stronger: #3a3f51; /* gray.80 */
$kui-color-background-neutral-strongest: #232633; /* gray.90 */
$kui-color-background-neutral-weak: #afb7c5; /* gray.40 */
$kui-color-background-neutral-weaker: #e0e4ea; /* gray.20 */
$kui-color-background-neutral-weakest: #f9fafb; /* gray.10 */
$kui-color-background-primary: #0044f4; /* blue.60 */
$kui-color-background-primary-strong: #0030cc; /* blue.70 */
$kui-color-background-primary-stronger: #002099; /* blue.80 */
$kui-color-background-primary-strongest: #001466; /* blue.90 */
$kui-color-background-primary-weak: #5f9aff; /* blue.40 */
$kui-color-background-primary-weaker: #bee2ff; /* blue.20 */
$kui-color-background-primary-weakest: #eefaff; /* blue.10 */
$kui-color-background-success-weakest: #ecfffb; /* green.10 */
$kui-color-background-transparent: rgba(0, 0, 0, 0); /* transparent */
$kui-color-background-warning-weakest: #fffce0; /* yellow.10 */
$kui-color-border: #e0e4ea; /* gray.20 */
$kui-color-border-danger: #d60027; /* red.60 */
$kui-color-border-danger-strong: #ad000e; /* red.70 */
$kui-color-border-danger-stronger: #850000; /* red.80 */
$kui-color-border-danger-strongest: #5c0000; /* red.90 */
$kui-color-border-danger-weak: #ff3954; /* red.40 */
$kui-color-border-danger-weaker: #ffabab; /* red.20 */
$kui-color-border-danger-weakest: #ffe5e5; /* red.10 */
$kui-color-border-decorative: #6f28ff; /* purple.60 */
$kui-color-border-disabled: #e0e4ea; /* gray.20 */
$kui-color-border-neutral-weak: #afb7c5; /* gray.40 */
$kui-color-border-primary: #0044f4; /* blue.60 */
$kui-color-border-primary-strong: #0030cc; /* blue.70 */
$kui-color-border-primary-stronger: #002099; /* blue.80 */
$kui-color-border-primary-strongest: #001466; /* blue.90 */
$kui-color-border-primary-weak: #5f9aff; /* blue.40 */
$kui-color-border-primary-weaker: #bee2ff; /* blue.20 */
$kui-color-border-primary-weakest: #eefaff; /* blue.10 */
$kui-color-border-transparent: rgba(0, 0, 0, 0); /* transparent */
$kui-color-text: #000933; /* blue.100 */
$kui-color-text-danger: #d60027; /* red.60 */
$kui-color-text-decorative: #00abd2; /* aqua.50 */
$kui-color-text-disabled: #828a9e; /* gray.50 */
$kui-color-text-inverse: #ffffff; /* white */
$kui-color-text-neutral: #6c7489; /* gray.60 */
$kui-color-text-neutral-strong: #52596e; /* gray.70 */
$kui-color-text-neutral-stronger: #3a3f51; /* gray.80 */
$kui-color-text-neutral-strongest: #232633; /* gray.90 */
$kui-color-text-neutral-weak: #afb7c5; /* gray.40 */
$kui-color-text-primary: #0044f4; /* blue.60 */
$kui-color-text-primary-strong: #0030cc; /* blue.70 */
$kui-color-text-primary-stronger: #002099; /* blue.80 */
$kui-color-text-success: #007d60; /* green.60 */
$kui-color-text-warning: #995c00; /* yellow.60 */
/* white */
$kui-color-background: #ffffff;
/* red.60 */
$kui-color-background-danger: #d60027;
/* red.70 */
$kui-color-background-danger-strong: #ad000e;
/* red.80 */
$kui-color-background-danger-stronger: #850000;
/* red.90 */
$kui-color-background-danger-strongest: #5c0000;
/* red.40 */
$kui-color-background-danger-weak: #ff3954;
/* red.20 */
$kui-color-background-danger-weaker: #ffabab;
/* red.10 */
$kui-color-background-danger-weakest: #ffe5e5;
/* gray.20 */
$kui-color-background-disabled: #e0e4ea;
/* blue.100 */
$kui-color-background-inverse: #000933;
/* gray.60 */
$kui-color-background-neutral: #6c7489;
/* gray.70 */
$kui-color-background-neutral-strong: #52596e;
/* gray.80 */
$kui-color-background-neutral-stronger: #3a3f51;
/* gray.90 */
$kui-color-background-neutral-strongest: #232633;
/* gray.40 */
$kui-color-background-neutral-weak: #afb7c5;
/* gray.20 */
$kui-color-background-neutral-weaker: #e0e4ea;
/* gray.10 */
$kui-color-background-neutral-weakest: #f9fafb;
/* blue.60 */
$kui-color-background-primary: #0044f4;
/* blue.70 */
$kui-color-background-primary-strong: #0030cc;
/* blue.80 */
$kui-color-background-primary-stronger: #002099;
/* blue.90 */
$kui-color-background-primary-strongest: #001466;
/* blue.40 */
$kui-color-background-primary-weak: #5f9aff;
/* blue.20 */
$kui-color-background-primary-weaker: #bee2ff;
/* blue.10 */
$kui-color-background-primary-weakest: #eefaff;
/* green.10 */
$kui-color-background-success-weakest: #ecfffb;
/* transparent */
$kui-color-background-transparent: rgba(0, 0, 0, 0);
/* yellow.10 */
$kui-color-background-warning-weakest: #fffce0;
/* gray.20 */
$kui-color-border: #e0e4ea;
/* red.60 */
$kui-color-border-danger: #d60027;
/* red.70 */
$kui-color-border-danger-strong: #ad000e;
/* red.80 */
$kui-color-border-danger-stronger: #850000;
/* red.90 */
$kui-color-border-danger-strongest: #5c0000;
/* red.40 */
$kui-color-border-danger-weak: #ff3954;
/* red.20 */
$kui-color-border-danger-weaker: #ffabab;
/* red.10 */
$kui-color-border-danger-weakest: #ffe5e5;
/* purple.60 */
$kui-color-border-decorative: #6f28ff;
/* gray.20 */
$kui-color-border-disabled: #e0e4ea;
/* gray.40 */
$kui-color-border-neutral-weak: #afb7c5;
/* blue.60 */
$kui-color-border-primary: #0044f4;
/* blue.70 */
$kui-color-border-primary-strong: #0030cc;
/* blue.80 */
$kui-color-border-primary-stronger: #002099;
/* blue.90 */
$kui-color-border-primary-strongest: #001466;
/* blue.40 */
$kui-color-border-primary-weak: #5f9aff;
/* blue.20 */
$kui-color-border-primary-weaker: #bee2ff;
/* blue.10 */
$kui-color-border-primary-weakest: #eefaff;
/* transparent */
$kui-color-border-transparent: rgba(0, 0, 0, 0);
/* blue.100 */
$kui-color-text: #000933;
/* red.60 */
$kui-color-text-danger: #d60027;
/* aqua.50 */
$kui-color-text-decorative: #00abd2;
/* gray.50 */
$kui-color-text-disabled: #828a9e;
/* white */
$kui-color-text-inverse: #ffffff;
/* gray.60 */
$kui-color-text-neutral: #6c7489;
/* gray.70 */
$kui-color-text-neutral-strong: #52596e;
/* gray.80 */
$kui-color-text-neutral-stronger: #3a3f51;
/* gray.90 */
$kui-color-text-neutral-strongest: #232633;
/* gray.40 */
$kui-color-text-neutral-weak: #afb7c5;
/* blue.60 */
$kui-color-text-primary: #0044f4;
/* blue.70 */
$kui-color-text-primary-strong: #0030cc;
/* blue.80 */
$kui-color-text-primary-stronger: #002099;
/* green.60 */
$kui-color-text-success: #007d60;
/* yellow.60 */
$kui-color-text-warning: #995c00;
$kui-border-radius-0: 0px;

@@ -89,4 +152,6 @@ $kui-border-radius-10: 2px;

$kui-border-radius-40: 8px;
$kui-border-radius-circle: 50%; /* Used to create a circle. Value of 50% */
$kui-border-radius-round: 100px; /* Used to round element corners. Value of 100px */
/* Used to create a circle. Value of 50% */
$kui-border-radius-circle: 50%;
/* Used to round element corners. Value of 100px */
$kui-border-radius-round: 100px;
$kui-border-width-0: 0px;

@@ -96,7 +161,12 @@ $kui-border-width-10: 1px;

$kui-border-width-30: 4px;
$kui-breakpoint-mobile: 640px; /* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
$kui-breakpoint-phablet: 768px; /* Used for tablet screens. */
$kui-breakpoint-tablet: 1024px; /* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
$kui-breakpoint-laptop: 1280px; /* Used for standard desktop screens. */
$kui-breakpoint-desktop: 1536px; /* Used for larger desktop screens. */
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
$kui-breakpoint-mobile: 640px;
/* Used for tablet screens. */
$kui-breakpoint-phablet: 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
$kui-breakpoint-tablet: 1024px;
/* Used for standard desktop screens. */
$kui-breakpoint-laptop: 1280px;
/* Used for larger desktop screens. */
$kui-breakpoint-desktop: 1536px;
$kui-icon-size-10: 10px;

@@ -106,26 +176,47 @@ $kui-icon-size-20: 12px;

$kui-icon-size-40: 20px;
$kui-icon-size-50: 24px; /* The default icon size */
/* The default icon size */
$kui-icon-size-50: 24px;
$kui-icon-size-60: 32px;
$kui-icon-size-70: 40px;
$kui-icon-size-80: 48px;
$kui-method-color-background-connect: #f1f0ff; /* purple.10 */
$kui-method-color-background-delete: #ffe5e5; /* red.10 */
$kui-method-color-background-get: #eefaff; /* blue.10 */
$kui-method-color-background-head: #6c7489; /* gray.60 */
$kui-method-color-background-options: #f9fafb; /* gray.10 */
$kui-method-color-background-patch: #ecfcff; /* aqua.10 */
$kui-method-color-background-post: #ecfffb; /* green.10 */
$kui-method-color-background-put: #fffce0; /* yellow.10 */
$kui-method-color-background-trace: #fff0f7; /* pink.10 */
$kui-method-color-text-connect: #6f28ff; /* purple.60 */
$kui-method-color-text-delete: #d60027; /* red.60 */
$kui-method-color-text-get: #0044f4; /* blue.60 */
$kui-method-color-text-head: #f9fafb; /* gray.10 */
$kui-method-color-text-options: #6c7489; /* gray.60 */
$kui-method-color-text-patch: #00819d; /* aqua.60 */
$kui-method-color-text-post: #007d60; /* green.60 */
$kui-method-color-text-put: #995c00; /* yellow.60 */
$kui-method-color-text-trace: #d60067; /* pink.60 */
$kui-font-family-code: 'JetBrains Mono', Consolas, monospace; /* The standard monospace font family. */
$kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif; /* The standard text font family. */
/* purple.10 */
$kui-method-color-background-connect: #f1f0ff;
/* red.10 */
$kui-method-color-background-delete: #ffe5e5;
/* blue.10 */
$kui-method-color-background-get: #eefaff;
/* gray.60 */
$kui-method-color-background-head: #6c7489;
/* gray.10 */
$kui-method-color-background-options: #f9fafb;
/* aqua.10 */
$kui-method-color-background-patch: #ecfcff;
/* green.10 */
$kui-method-color-background-post: #ecfffb;
/* yellow.10 */
$kui-method-color-background-put: #fffce0;
/* pink.10 */
$kui-method-color-background-trace: #fff0f7;
/* purple.60 */
$kui-method-color-text-connect: #6f28ff;
/* red.60 */
$kui-method-color-text-delete: #d60027;
/* blue.60 */
$kui-method-color-text-get: #0044f4;
/* gray.10 */
$kui-method-color-text-head: #f9fafb;
/* gray.60 */
$kui-method-color-text-options: #6c7489;
/* aqua.60 */
$kui-method-color-text-patch: #00819d;
/* green.60 */
$kui-method-color-text-post: #007d60;
/* yellow.60 */
$kui-method-color-text-put: #995c00;
/* pink.60 */
$kui-method-color-text-trace: #d60067;
/* The standard monospace font family. */
$kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
$kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif;
$kui-font-size-10: 10px;

@@ -141,33 +232,64 @@ $kui-font-size-20: 12px;

$kui-font-size-100: 48px;
$kui-font-weight-bold: 700; /* 700 */
$kui-font-weight-medium: 500; /* 500 */
$kui-font-weight-regular: 400; /* 400: The normal font weight. */
$kui-font-weight-semibold: 600; /* 600 */
$kui-line-height-10: 12px; /* 12px */
$kui-line-height-20: 16px; /* 16px */
$kui-line-height-30: 20px; /* 20px */
$kui-line-height-40: 24px; /* 24px */
$kui-line-height-50: 28px; /* 28px */
$kui-line-height-60: 32px; /* 32px */
$kui-line-height-70: 36px; /* 36px */
$kui-line-height-80: 40px; /* 40px */
$kui-line-height-90: 48px; /* 48px */
$kui-line-height-100: 56px; /* 56px */
$kui-space-0: 0px; /* 0px */
$kui-space-10: 2px; /* 2px */
$kui-space-20: 4px; /* 4px */
$kui-space-30: 6px; /* 6px */
$kui-space-40: 8px; /* 8px */
$kui-space-50: 12px; /* 12px */
$kui-space-60: 16px; /* 16px */
$kui-space-70: 20px; /* 20px */
$kui-space-80: 24px; /* 24px */
$kui-space-90: 32px; /* 32px */
$kui-space-100: 40px; /* 40px */
$kui-space-110: 48px; /* 48px */
$kui-space-120: 56px; /* 56px */
$kui-space-130: 64px; /* 64px */
$kui-space-140: 80px; /* 80px */
$kui-space-150: 96px; /* 96px */
$kui-space-auto: auto; /* auto */
/* 700 */
$kui-font-weight-bold: 700;
/* 500 */
$kui-font-weight-medium: 500;
/* 400: The normal font weight. */
$kui-font-weight-regular: 400;
/* 600 */
$kui-font-weight-semibold: 600;
/* 12px */
$kui-line-height-10: 12px;
/* 16px */
$kui-line-height-20: 16px;
/* 20px */
$kui-line-height-30: 20px;
/* 24px */
$kui-line-height-40: 24px;
/* 28px */
$kui-line-height-50: 28px;
/* 32px */
$kui-line-height-60: 32px;
/* 36px */
$kui-line-height-70: 36px;
/* 40px */
$kui-line-height-80: 40px;
/* 48px */
$kui-line-height-90: 48px;
/* 56px */
$kui-line-height-100: 56px;
/* 0px */
$kui-space-0: 0px;
/* 2px */
$kui-space-10: 2px;
/* 4px */
$kui-space-20: 4px;
/* 6px */
$kui-space-30: 6px;
/* 8px */
$kui-space-40: 8px;
/* 12px */
$kui-space-50: 12px;
/* 16px */
$kui-space-60: 16px;
/* 20px */
$kui-space-70: 20px;
/* 24px */
$kui-space-80: 24px;
/* 32px */
$kui-space-90: 32px;
/* 40px */
$kui-space-100: 40px;
/* 48px */
$kui-space-110: 48px;
/* 56px */
$kui-space-120: 56px;
/* 64px */
$kui-space-130: 64px;
/* 80px */
$kui-space-140: 80px;
/* 96px */
$kui-space-150: 96px;
/* auto */
$kui-space-auto: auto;
```

@@ -177,70 +299,972 @@

## JavaScript Variables
### SCSS Map
<details>
<summary>Click to view exported SCSS map</summary>
```scss
$tokens-map: (
/* white */
'kui-color-background': #ffffff;
/* red.60 */
'kui-color-background-danger': #d60027;
/* red.70 */
'kui-color-background-danger-strong': #ad000e;
/* red.80 */
'kui-color-background-danger-stronger': #850000;
/* red.90 */
'kui-color-background-danger-strongest': #5c0000;
/* red.40 */
'kui-color-background-danger-weak': #ff3954;
/* red.20 */
'kui-color-background-danger-weaker': #ffabab;
/* red.10 */
'kui-color-background-danger-weakest': #ffe5e5;
/* gray.20 */
'kui-color-background-disabled': #e0e4ea;
/* blue.100 */
'kui-color-background-inverse': #000933;
/* gray.60 */
'kui-color-background-neutral': #6c7489;
/* gray.70 */
'kui-color-background-neutral-strong': #52596e;
/* gray.80 */
'kui-color-background-neutral-stronger': #3a3f51;
/* gray.90 */
'kui-color-background-neutral-strongest': #232633;
/* gray.40 */
'kui-color-background-neutral-weak': #afb7c5;
/* gray.20 */
'kui-color-background-neutral-weaker': #e0e4ea;
/* gray.10 */
'kui-color-background-neutral-weakest': #f9fafb;
/* blue.60 */
'kui-color-background-primary': #0044f4;
/* blue.70 */
'kui-color-background-primary-strong': #0030cc;
/* blue.80 */
'kui-color-background-primary-stronger': #002099;
/* blue.90 */
'kui-color-background-primary-strongest': #001466;
/* blue.40 */
'kui-color-background-primary-weak': #5f9aff;
/* blue.20 */
'kui-color-background-primary-weaker': #bee2ff;
/* blue.10 */
'kui-color-background-primary-weakest': #eefaff;
/* green.10 */
'kui-color-background-success-weakest': #ecfffb;
/* transparent */
'kui-color-background-transparent': rgba(0, 0, 0, 0);
/* yellow.10 */
'kui-color-background-warning-weakest': #fffce0;
/* gray.20 */
'kui-color-border': #e0e4ea;
/* red.60 */
'kui-color-border-danger': #d60027;
/* red.70 */
'kui-color-border-danger-strong': #ad000e;
/* red.80 */
'kui-color-border-danger-stronger': #850000;
/* red.90 */
'kui-color-border-danger-strongest': #5c0000;
/* red.40 */
'kui-color-border-danger-weak': #ff3954;
/* red.20 */
'kui-color-border-danger-weaker': #ffabab;
/* red.10 */
'kui-color-border-danger-weakest': #ffe5e5;
/* purple.60 */
'kui-color-border-decorative': #6f28ff;
/* gray.20 */
'kui-color-border-disabled': #e0e4ea;
/* gray.40 */
'kui-color-border-neutral-weak': #afb7c5;
/* blue.60 */
'kui-color-border-primary': #0044f4;
/* blue.70 */
'kui-color-border-primary-strong': #0030cc;
/* blue.80 */
'kui-color-border-primary-stronger': #002099;
/* blue.90 */
'kui-color-border-primary-strongest': #001466;
/* blue.40 */
'kui-color-border-primary-weak': #5f9aff;
/* blue.20 */
'kui-color-border-primary-weaker': #bee2ff;
/* blue.10 */
'kui-color-border-primary-weakest': #eefaff;
/* transparent */
'kui-color-border-transparent': rgba(0, 0, 0, 0);
/* blue.100 */
'kui-color-text': #000933;
/* red.60 */
'kui-color-text-danger': #d60027;
/* aqua.50 */
'kui-color-text-decorative': #00abd2;
/* gray.50 */
'kui-color-text-disabled': #828a9e;
/* white */
'kui-color-text-inverse': #ffffff;
/* gray.60 */
'kui-color-text-neutral': #6c7489;
/* gray.70 */
'kui-color-text-neutral-strong': #52596e;
/* gray.80 */
'kui-color-text-neutral-stronger': #3a3f51;
/* gray.90 */
'kui-color-text-neutral-strongest': #232633;
/* gray.40 */
'kui-color-text-neutral-weak': #afb7c5;
/* blue.60 */
'kui-color-text-primary': #0044f4;
/* blue.70 */
'kui-color-text-primary-strong': #0030cc;
/* blue.80 */
'kui-color-text-primary-stronger': #002099;
/* green.60 */
'kui-color-text-success': #007d60;
/* yellow.60 */
'kui-color-text-warning': #995c00;
'kui-border-radius-0': 0px;
'kui-border-radius-10': 2px;
'kui-border-radius-20': 4px;
'kui-border-radius-30': 6px;
'kui-border-radius-40': 8px;
/* Used to create a circle. Value of 50% */
'kui-border-radius-circle': 50%;
/* Used to round element corners. Value of 100px */
'kui-border-radius-round': 100px;
'kui-border-width-0': 0px;
'kui-border-width-10': 1px;
'kui-border-width-20': 2px;
'kui-border-width-30': 4px;
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
'kui-breakpoint-mobile': 640px;
/* Used for tablet screens. */
'kui-breakpoint-phablet': 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
'kui-breakpoint-tablet': 1024px;
/* Used for standard desktop screens. */
'kui-breakpoint-laptop': 1280px;
/* Used for larger desktop screens. */
'kui-breakpoint-desktop': 1536px;
'kui-icon-size-10': 10px;
'kui-icon-size-20': 12px;
'kui-icon-size-30': 16px;
'kui-icon-size-40': 20px;
/* The default icon size */
'kui-icon-size-50': 24px;
'kui-icon-size-60': 32px;
'kui-icon-size-70': 40px;
'kui-icon-size-80': 48px;
/* purple.10 */
'kui-method-color-background-connect': #f1f0ff;
/* red.10 */
'kui-method-color-background-delete': #ffe5e5;
/* blue.10 */
'kui-method-color-background-get': #eefaff;
/* gray.60 */
'kui-method-color-background-head': #6c7489;
/* gray.10 */
'kui-method-color-background-options': #f9fafb;
/* aqua.10 */
'kui-method-color-background-patch': #ecfcff;
/* green.10 */
'kui-method-color-background-post': #ecfffb;
/* yellow.10 */
'kui-method-color-background-put': #fffce0;
/* pink.10 */
'kui-method-color-background-trace': #fff0f7;
/* purple.60 */
'kui-method-color-text-connect': #6f28ff;
/* red.60 */
'kui-method-color-text-delete': #d60027;
/* blue.60 */
'kui-method-color-text-get': #0044f4;
/* gray.10 */
'kui-method-color-text-head': #f9fafb;
/* gray.60 */
'kui-method-color-text-options': #6c7489;
/* aqua.60 */
'kui-method-color-text-patch': #00819d;
/* green.60 */
'kui-method-color-text-post': #007d60;
/* yellow.60 */
'kui-method-color-text-put': #995c00;
/* pink.60 */
'kui-method-color-text-trace': #d60067;
/* The standard monospace font family. */
'kui-font-family-code': 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
'kui-font-family-text': 'Inter', Roboto, Helvetica, sans-serif;
'kui-font-size-10': 10px;
'kui-font-size-20': 12px;
'kui-font-size-30': 14px;
'kui-font-size-40': 16px;
'kui-font-size-50': 18px;
'kui-font-size-60': 20px;
'kui-font-size-70': 24px;
'kui-font-size-80': 32px;
'kui-font-size-90': 40px;
'kui-font-size-100': 48px;
/* 700 */
'kui-font-weight-bold': 700;
/* 500 */
'kui-font-weight-medium': 500;
/* 400: The normal font weight. */
'kui-font-weight-regular': 400;
/* 600 */
'kui-font-weight-semibold': 600;
/* 12px */
'kui-line-height-10': 12px;
/* 16px */
'kui-line-height-20': 16px;
/* 20px */
'kui-line-height-30': 20px;
/* 24px */
'kui-line-height-40': 24px;
/* 28px */
'kui-line-height-50': 28px;
/* 32px */
'kui-line-height-60': 32px;
/* 36px */
'kui-line-height-70': 36px;
/* 40px */
'kui-line-height-80': 40px;
/* 48px */
'kui-line-height-90': 48px;
/* 56px */
'kui-line-height-100': 56px;
/* 0px */
'kui-space-0': 0px;
/* 2px */
'kui-space-10': 2px;
/* 4px */
'kui-space-20': 4px;
/* 6px */
'kui-space-30': 6px;
/* 8px */
'kui-space-40': 8px;
/* 12px */
'kui-space-50': 12px;
/* 16px */
'kui-space-60': 16px;
/* 20px */
'kui-space-70': 20px;
/* 24px */
'kui-space-80': 24px;
/* 32px */
'kui-space-90': 32px;
/* 40px */
'kui-space-100': 40px;
/* 48px */
'kui-space-110': 48px;
/* 56px */
'kui-space-120': 56px;
/* 64px */
'kui-space-130': 64px;
/* 80px */
'kui-space-140': 80px;
/* 96px */
'kui-space-150': 96px;
/* auto */
'kui-space-auto': auto;
);
```
</details>
## LESS
### LESS Variables
<details>
<summary>Click to view the list of LESS variables</summary>
```less
/* white */
@kui-color-background: #ffffff;
/* red.60 */
@kui-color-background-danger: #d60027;
/* red.70 */
@kui-color-background-danger-strong: #ad000e;
/* red.80 */
@kui-color-background-danger-stronger: #850000;
/* red.90 */
@kui-color-background-danger-strongest: #5c0000;
/* red.40 */
@kui-color-background-danger-weak: #ff3954;
/* red.20 */
@kui-color-background-danger-weaker: #ffabab;
/* red.10 */
@kui-color-background-danger-weakest: #ffe5e5;
/* gray.20 */
@kui-color-background-disabled: #e0e4ea;
/* blue.100 */
@kui-color-background-inverse: #000933;
/* gray.60 */
@kui-color-background-neutral: #6c7489;
/* gray.70 */
@kui-color-background-neutral-strong: #52596e;
/* gray.80 */
@kui-color-background-neutral-stronger: #3a3f51;
/* gray.90 */
@kui-color-background-neutral-strongest: #232633;
/* gray.40 */
@kui-color-background-neutral-weak: #afb7c5;
/* gray.20 */
@kui-color-background-neutral-weaker: #e0e4ea;
/* gray.10 */
@kui-color-background-neutral-weakest: #f9fafb;
/* blue.60 */
@kui-color-background-primary: #0044f4;
/* blue.70 */
@kui-color-background-primary-strong: #0030cc;
/* blue.80 */
@kui-color-background-primary-stronger: #002099;
/* blue.90 */
@kui-color-background-primary-strongest: #001466;
/* blue.40 */
@kui-color-background-primary-weak: #5f9aff;
/* blue.20 */
@kui-color-background-primary-weaker: #bee2ff;
/* blue.10 */
@kui-color-background-primary-weakest: #eefaff;
/* green.10 */
@kui-color-background-success-weakest: #ecfffb;
/* transparent */
@kui-color-background-transparent: rgba(0, 0, 0, 0);
/* yellow.10 */
@kui-color-background-warning-weakest: #fffce0;
/* gray.20 */
@kui-color-border: #e0e4ea;
/* red.60 */
@kui-color-border-danger: #d60027;
/* red.70 */
@kui-color-border-danger-strong: #ad000e;
/* red.80 */
@kui-color-border-danger-stronger: #850000;
/* red.90 */
@kui-color-border-danger-strongest: #5c0000;
/* red.40 */
@kui-color-border-danger-weak: #ff3954;
/* red.20 */
@kui-color-border-danger-weaker: #ffabab;
/* red.10 */
@kui-color-border-danger-weakest: #ffe5e5;
/* purple.60 */
@kui-color-border-decorative: #6f28ff;
/* gray.20 */
@kui-color-border-disabled: #e0e4ea;
/* gray.40 */
@kui-color-border-neutral-weak: #afb7c5;
/* blue.60 */
@kui-color-border-primary: #0044f4;
/* blue.70 */
@kui-color-border-primary-strong: #0030cc;
/* blue.80 */
@kui-color-border-primary-stronger: #002099;
/* blue.90 */
@kui-color-border-primary-strongest: #001466;
/* blue.40 */
@kui-color-border-primary-weak: #5f9aff;
/* blue.20 */
@kui-color-border-primary-weaker: #bee2ff;
/* blue.10 */
@kui-color-border-primary-weakest: #eefaff;
/* transparent */
@kui-color-border-transparent: rgba(0, 0, 0, 0);
/* blue.100 */
@kui-color-text: #000933;
/* red.60 */
@kui-color-text-danger: #d60027;
/* aqua.50 */
@kui-color-text-decorative: #00abd2;
/* gray.50 */
@kui-color-text-disabled: #828a9e;
/* white */
@kui-color-text-inverse: #ffffff;
/* gray.60 */
@kui-color-text-neutral: #6c7489;
/* gray.70 */
@kui-color-text-neutral-strong: #52596e;
/* gray.80 */
@kui-color-text-neutral-stronger: #3a3f51;
/* gray.90 */
@kui-color-text-neutral-strongest: #232633;
/* gray.40 */
@kui-color-text-neutral-weak: #afb7c5;
/* blue.60 */
@kui-color-text-primary: #0044f4;
/* blue.70 */
@kui-color-text-primary-strong: #0030cc;
/* blue.80 */
@kui-color-text-primary-stronger: #002099;
/* green.60 */
@kui-color-text-success: #007d60;
/* yellow.60 */
@kui-color-text-warning: #995c00;
@kui-border-radius-0: 0px;
@kui-border-radius-10: 2px;
@kui-border-radius-20: 4px;
@kui-border-radius-30: 6px;
@kui-border-radius-40: 8px;
/* Used to create a circle. Value of 50% */
@kui-border-radius-circle: 50%;
/* Used to round element corners. Value of 100px */
@kui-border-radius-round: 100px;
@kui-border-width-0: 0px;
@kui-border-width-10: 1px;
@kui-border-width-20: 2px;
@kui-border-width-30: 4px;
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
@kui-breakpoint-mobile: 640px;
/* Used for tablet screens. */
@kui-breakpoint-phablet: 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
@kui-breakpoint-tablet: 1024px;
/* Used for standard desktop screens. */
@kui-breakpoint-laptop: 1280px;
/* Used for larger desktop screens. */
@kui-breakpoint-desktop: 1536px;
@kui-icon-size-10: 10px;
@kui-icon-size-20: 12px;
@kui-icon-size-30: 16px;
@kui-icon-size-40: 20px;
/* The default icon size */
@kui-icon-size-50: 24px;
@kui-icon-size-60: 32px;
@kui-icon-size-70: 40px;
@kui-icon-size-80: 48px;
/* purple.10 */
@kui-method-color-background-connect: #f1f0ff;
/* red.10 */
@kui-method-color-background-delete: #ffe5e5;
/* blue.10 */
@kui-method-color-background-get: #eefaff;
/* gray.60 */
@kui-method-color-background-head: #6c7489;
/* gray.10 */
@kui-method-color-background-options: #f9fafb;
/* aqua.10 */
@kui-method-color-background-patch: #ecfcff;
/* green.10 */
@kui-method-color-background-post: #ecfffb;
/* yellow.10 */
@kui-method-color-background-put: #fffce0;
/* pink.10 */
@kui-method-color-background-trace: #fff0f7;
/* purple.60 */
@kui-method-color-text-connect: #6f28ff;
/* red.60 */
@kui-method-color-text-delete: #d60027;
/* blue.60 */
@kui-method-color-text-get: #0044f4;
/* gray.10 */
@kui-method-color-text-head: #f9fafb;
/* gray.60 */
@kui-method-color-text-options: #6c7489;
/* aqua.60 */
@kui-method-color-text-patch: #00819d;
/* green.60 */
@kui-method-color-text-post: #007d60;
/* yellow.60 */
@kui-method-color-text-put: #995c00;
/* pink.60 */
@kui-method-color-text-trace: #d60067;
/* The standard monospace font family. */
@kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
@kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif;
@kui-font-size-10: 10px;
@kui-font-size-20: 12px;
@kui-font-size-30: 14px;
@kui-font-size-40: 16px;
@kui-font-size-50: 18px;
@kui-font-size-60: 20px;
@kui-font-size-70: 24px;
@kui-font-size-80: 32px;
@kui-font-size-90: 40px;
@kui-font-size-100: 48px;
/* 700 */
@kui-font-weight-bold: 700;
/* 500 */
@kui-font-weight-medium: 500;
/* 400: The normal font weight. */
@kui-font-weight-regular: 400;
/* 600 */
@kui-font-weight-semibold: 600;
/* 12px */
@kui-line-height-10: 12px;
/* 16px */
@kui-line-height-20: 16px;
/* 20px */
@kui-line-height-30: 20px;
/* 24px */
@kui-line-height-40: 24px;
/* 28px */
@kui-line-height-50: 28px;
/* 32px */
@kui-line-height-60: 32px;
/* 36px */
@kui-line-height-70: 36px;
/* 40px */
@kui-line-height-80: 40px;
/* 48px */
@kui-line-height-90: 48px;
/* 56px */
@kui-line-height-100: 56px;
/* 0px */
@kui-space-0: 0px;
/* 2px */
@kui-space-10: 2px;
/* 4px */
@kui-space-20: 4px;
/* 6px */
@kui-space-30: 6px;
/* 8px */
@kui-space-40: 8px;
/* 12px */
@kui-space-50: 12px;
/* 16px */
@kui-space-60: 16px;
/* 20px */
@kui-space-70: 20px;
/* 24px */
@kui-space-80: 24px;
/* 32px */
@kui-space-90: 32px;
/* 40px */
@kui-space-100: 40px;
/* 48px */
@kui-space-110: 48px;
/* 56px */
@kui-space-120: 56px;
/* 64px */
@kui-space-130: 64px;
/* 80px */
@kui-space-140: 80px;
/* 96px */
@kui-space-150: 96px;
/* auto */
@kui-space-auto: auto;
```
</details>
## CSS
### CSS Custom Properties
You may scope your CSS custom property overrides inside the `:root` selector as shown here, or inside any other valid CSS selector.
<details>
<summary>Click to view the list of CSS custom properties</summary>
```scss
/* white */
--kui-color-background: #ffffff;
/* red.60 */
--kui-color-background-danger: #d60027;
/* red.70 */
--kui-color-background-danger-strong: #ad000e;
/* red.80 */
--kui-color-background-danger-stronger: #850000;
/* red.90 */
--kui-color-background-danger-strongest: #5c0000;
/* red.40 */
--kui-color-background-danger-weak: #ff3954;
/* red.20 */
--kui-color-background-danger-weaker: #ffabab;
/* red.10 */
--kui-color-background-danger-weakest: #ffe5e5;
/* gray.20 */
--kui-color-background-disabled: #e0e4ea;
/* blue.100 */
--kui-color-background-inverse: #000933;
/* gray.60 */
--kui-color-background-neutral: #6c7489;
/* gray.70 */
--kui-color-background-neutral-strong: #52596e;
/* gray.80 */
--kui-color-background-neutral-stronger: #3a3f51;
/* gray.90 */
--kui-color-background-neutral-strongest: #232633;
/* gray.40 */
--kui-color-background-neutral-weak: #afb7c5;
/* gray.20 */
--kui-color-background-neutral-weaker: #e0e4ea;
/* gray.10 */
--kui-color-background-neutral-weakest: #f9fafb;
/* blue.60 */
--kui-color-background-primary: #0044f4;
/* blue.70 */
--kui-color-background-primary-strong: #0030cc;
/* blue.80 */
--kui-color-background-primary-stronger: #002099;
/* blue.90 */
--kui-color-background-primary-strongest: #001466;
/* blue.40 */
--kui-color-background-primary-weak: #5f9aff;
/* blue.20 */
--kui-color-background-primary-weaker: #bee2ff;
/* blue.10 */
--kui-color-background-primary-weakest: #eefaff;
/* green.10 */
--kui-color-background-success-weakest: #ecfffb;
/* transparent */
--kui-color-background-transparent: rgba(0, 0, 0, 0);
/* yellow.10 */
--kui-color-background-warning-weakest: #fffce0;
/* gray.20 */
--kui-color-border: #e0e4ea;
/* red.60 */
--kui-color-border-danger: #d60027;
/* red.70 */
--kui-color-border-danger-strong: #ad000e;
/* red.80 */
--kui-color-border-danger-stronger: #850000;
/* red.90 */
--kui-color-border-danger-strongest: #5c0000;
/* red.40 */
--kui-color-border-danger-weak: #ff3954;
/* red.20 */
--kui-color-border-danger-weaker: #ffabab;
/* red.10 */
--kui-color-border-danger-weakest: #ffe5e5;
/* purple.60 */
--kui-color-border-decorative: #6f28ff;
/* gray.20 */
--kui-color-border-disabled: #e0e4ea;
/* gray.40 */
--kui-color-border-neutral-weak: #afb7c5;
/* blue.60 */
--kui-color-border-primary: #0044f4;
/* blue.70 */
--kui-color-border-primary-strong: #0030cc;
/* blue.80 */
--kui-color-border-primary-stronger: #002099;
/* blue.90 */
--kui-color-border-primary-strongest: #001466;
/* blue.40 */
--kui-color-border-primary-weak: #5f9aff;
/* blue.20 */
--kui-color-border-primary-weaker: #bee2ff;
/* blue.10 */
--kui-color-border-primary-weakest: #eefaff;
/* transparent */
--kui-color-border-transparent: rgba(0, 0, 0, 0);
/* blue.100 */
--kui-color-text: #000933;
/* red.60 */
--kui-color-text-danger: #d60027;
/* aqua.50 */
--kui-color-text-decorative: #00abd2;
/* gray.50 */
--kui-color-text-disabled: #828a9e;
/* white */
--kui-color-text-inverse: #ffffff;
/* gray.60 */
--kui-color-text-neutral: #6c7489;
/* gray.70 */
--kui-color-text-neutral-strong: #52596e;
/* gray.80 */
--kui-color-text-neutral-stronger: #3a3f51;
/* gray.90 */
--kui-color-text-neutral-strongest: #232633;
/* gray.40 */
--kui-color-text-neutral-weak: #afb7c5;
/* blue.60 */
--kui-color-text-primary: #0044f4;
/* blue.70 */
--kui-color-text-primary-strong: #0030cc;
/* blue.80 */
--kui-color-text-primary-stronger: #002099;
/* green.60 */
--kui-color-text-success: #007d60;
/* yellow.60 */
--kui-color-text-warning: #995c00;
--kui-border-radius-0: 0px;
--kui-border-radius-10: 2px;
--kui-border-radius-20: 4px;
--kui-border-radius-30: 6px;
--kui-border-radius-40: 8px;
/* Used to create a circle. Value of 50% */
--kui-border-radius-circle: 50%;
/* Used to round element corners. Value of 100px */
--kui-border-radius-round: 100px;
--kui-border-width-0: 0px;
--kui-border-width-10: 1px;
--kui-border-width-20: 2px;
--kui-border-width-30: 4px;
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
--kui-breakpoint-mobile: 640px;
/* Used for tablet screens. */
--kui-breakpoint-phablet: 768px;
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
--kui-breakpoint-tablet: 1024px;
/* Used for standard desktop screens. */
--kui-breakpoint-laptop: 1280px;
/* Used for larger desktop screens. */
--kui-breakpoint-desktop: 1536px;
--kui-icon-size-10: 10px;
--kui-icon-size-20: 12px;
--kui-icon-size-30: 16px;
--kui-icon-size-40: 20px;
/* The default icon size */
--kui-icon-size-50: 24px;
--kui-icon-size-60: 32px;
--kui-icon-size-70: 40px;
--kui-icon-size-80: 48px;
/* purple.10 */
--kui-method-color-background-connect: #f1f0ff;
/* red.10 */
--kui-method-color-background-delete: #ffe5e5;
/* blue.10 */
--kui-method-color-background-get: #eefaff;
/* gray.60 */
--kui-method-color-background-head: #6c7489;
/* gray.10 */
--kui-method-color-background-options: #f9fafb;
/* aqua.10 */
--kui-method-color-background-patch: #ecfcff;
/* green.10 */
--kui-method-color-background-post: #ecfffb;
/* yellow.10 */
--kui-method-color-background-put: #fffce0;
/* pink.10 */
--kui-method-color-background-trace: #fff0f7;
/* purple.60 */
--kui-method-color-text-connect: #6f28ff;
/* red.60 */
--kui-method-color-text-delete: #d60027;
/* blue.60 */
--kui-method-color-text-get: #0044f4;
/* gray.10 */
--kui-method-color-text-head: #f9fafb;
/* gray.60 */
--kui-method-color-text-options: #6c7489;
/* aqua.60 */
--kui-method-color-text-patch: #00819d;
/* green.60 */
--kui-method-color-text-post: #007d60;
/* yellow.60 */
--kui-method-color-text-put: #995c00;
/* pink.60 */
--kui-method-color-text-trace: #d60067;
/* The standard monospace font family. */
--kui-font-family-code: 'JetBrains Mono', Consolas, monospace;
/* The standard text font family. */
--kui-font-family-text: 'Inter', Roboto, Helvetica, sans-serif;
--kui-font-size-10: 10px;
--kui-font-size-20: 12px;
--kui-font-size-30: 14px;
--kui-font-size-40: 16px;
--kui-font-size-50: 18px;
--kui-font-size-60: 20px;
--kui-font-size-70: 24px;
--kui-font-size-80: 32px;
--kui-font-size-90: 40px;
--kui-font-size-100: 48px;
/* 700 */
--kui-font-weight-bold: 700;
/* 500 */
--kui-font-weight-medium: 500;
/* 400: The normal font weight. */
--kui-font-weight-regular: 400;
/* 600 */
--kui-font-weight-semibold: 600;
/* 12px */
--kui-line-height-10: 12px;
/* 16px */
--kui-line-height-20: 16px;
/* 20px */
--kui-line-height-30: 20px;
/* 24px */
--kui-line-height-40: 24px;
/* 28px */
--kui-line-height-50: 28px;
/* 32px */
--kui-line-height-60: 32px;
/* 36px */
--kui-line-height-70: 36px;
/* 40px */
--kui-line-height-80: 40px;
/* 48px */
--kui-line-height-90: 48px;
/* 56px */
--kui-line-height-100: 56px;
/* 0px */
--kui-space-0: 0px;
/* 2px */
--kui-space-10: 2px;
/* 4px */
--kui-space-20: 4px;
/* 6px */
--kui-space-30: 6px;
/* 8px */
--kui-space-40: 8px;
/* 12px */
--kui-space-50: 12px;
/* 16px */
--kui-space-60: 16px;
/* 20px */
--kui-space-70: 20px;
/* 24px */
--kui-space-80: 24px;
/* 32px */
--kui-space-90: 32px;
/* 40px */
--kui-space-100: 40px;
/* 48px */
--kui-space-110: 48px;
/* 56px */
--kui-space-120: 56px;
/* 64px */
--kui-space-130: 64px;
/* 80px */
--kui-space-140: 80px;
/* 96px */
--kui-space-150: 96px;
/* auto */
--kui-space-auto: auto;
```
</details>
## JavaScript
### JavaScript / TypeScript Constants
<details>
<summary>Click to view the list of JavaScript variables</summary>
```javascript
export const KUI_COLOR_BACKGROUND = "#ffffff"; /* white */
export const KUI_COLOR_BACKGROUND_DANGER = "#d60027"; /* red.60 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONG = "#ad000e"; /* red.70 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGER = "#850000"; /* red.80 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGEST = "#5c0000"; /* red.90 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAK = "#ff3954"; /* red.40 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKER = "#ffabab"; /* red.20 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKEST = "#ffe5e5"; /* red.10 */
export const KUI_COLOR_BACKGROUND_DISABLED = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BACKGROUND_INVERSE = "#000933"; /* blue.100 */
export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489"; /* gray.60 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG = "#52596e"; /* gray.70 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER = "#3a3f51"; /* gray.80 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST = "#232633"; /* gray.90 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5"; /* gray.40 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb"; /* gray.10 */
export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4"; /* blue.60 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG = "#0030cc"; /* blue.70 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER = "#002099"; /* blue.80 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST = "#001466"; /* blue.90 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK = "#5f9aff"; /* blue.40 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER = "#bee2ff"; /* blue.20 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST = "#eefaff"; /* blue.10 */
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST = "#ecfffb"; /* green.10 */
export const KUI_COLOR_BACKGROUND_TRANSPARENT = "rgba(0, 0, 0, 0)"; /* transparent */
export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST = "#fffce0"; /* yellow.10 */
export const KUI_COLOR_BORDER = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BORDER_DANGER = "#d60027"; /* red.60 */
export const KUI_COLOR_BORDER_DANGER_STRONG = "#ad000e"; /* red.70 */
export const KUI_COLOR_BORDER_DANGER_STRONGER = "#850000"; /* red.80 */
export const KUI_COLOR_BORDER_DANGER_STRONGEST = "#5c0000"; /* red.90 */
export const KUI_COLOR_BORDER_DANGER_WEAK = "#ff3954"; /* red.40 */
export const KUI_COLOR_BORDER_DANGER_WEAKER = "#ffabab"; /* red.20 */
export const KUI_COLOR_BORDER_DANGER_WEAKEST = "#ffe5e5"; /* red.10 */
export const KUI_COLOR_BORDER_DECORATIVE = "#6f28ff"; /* purple.60 */
export const KUI_COLOR_BORDER_DISABLED = "#e0e4ea"; /* gray.20 */
export const KUI_COLOR_BORDER_NEUTRAL_WEAK = "#afb7c5"; /* gray.40 */
export const KUI_COLOR_BORDER_PRIMARY = "#0044f4"; /* blue.60 */
export const KUI_COLOR_BORDER_PRIMARY_STRONG = "#0030cc"; /* blue.70 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGER = "#002099"; /* blue.80 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGEST = "#001466"; /* blue.90 */
export const KUI_COLOR_BORDER_PRIMARY_WEAK = "#5f9aff"; /* blue.40 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKER = "#bee2ff"; /* blue.20 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff"; /* blue.10 */
export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)"; /* transparent */
export const KUI_COLOR_TEXT = "#000933"; /* blue.100 */
export const KUI_COLOR_TEXT_DANGER = "#d60027"; /* red.60 */
export const KUI_COLOR_TEXT_DECORATIVE = "#00abd2"; /* aqua.50 */
export const KUI_COLOR_TEXT_DISABLED = "#828a9e"; /* gray.50 */
export const KUI_COLOR_TEXT_INVERSE = "#ffffff"; /* white */
export const KUI_COLOR_TEXT_NEUTRAL = "#6c7489"; /* gray.60 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONG = "#52596e"; /* gray.70 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGER = "#3a3f51"; /* gray.80 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST = "#232633"; /* gray.90 */
export const KUI_COLOR_TEXT_NEUTRAL_WEAK = "#afb7c5"; /* gray.40 */
export const KUI_COLOR_TEXT_PRIMARY = "#0044f4"; /* blue.60 */
export const KUI_COLOR_TEXT_PRIMARY_STRONG = "#0030cc"; /* blue.70 */
export const KUI_COLOR_TEXT_PRIMARY_STRONGER = "#002099"; /* blue.80 */
export const KUI_COLOR_TEXT_SUCCESS = "#007d60"; /* green.60 */
export const KUI_COLOR_TEXT_WARNING = "#995c00"; /* yellow.60 */
/* white */
export const KUI_COLOR_BACKGROUND = "#ffffff";
/* red.60 */
export const KUI_COLOR_BACKGROUND_DANGER = "#d60027";
/* red.70 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONG = "#ad000e";
/* red.80 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGER = "#850000";
/* red.90 */
export const KUI_COLOR_BACKGROUND_DANGER_STRONGEST = "#5c0000";
/* red.40 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAK = "#ff3954";
/* red.20 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKER = "#ffabab";
/* red.10 */
export const KUI_COLOR_BACKGROUND_DANGER_WEAKEST = "#ffe5e5";
/* gray.20 */
export const KUI_COLOR_BACKGROUND_DISABLED = "#e0e4ea";
/* blue.100 */
export const KUI_COLOR_BACKGROUND_INVERSE = "#000933";
/* gray.60 */
export const KUI_COLOR_BACKGROUND_NEUTRAL = "#6c7489";
/* gray.70 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONG = "#52596e";
/* gray.80 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGER = "#3a3f51";
/* gray.90 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_STRONGEST = "#232633";
/* gray.40 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAK = "#afb7c5";
/* gray.20 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER = "#e0e4ea";
/* gray.10 */
export const KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST = "#f9fafb";
/* blue.60 */
export const KUI_COLOR_BACKGROUND_PRIMARY = "#0044f4";
/* blue.70 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONG = "#0030cc";
/* blue.80 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGER = "#002099";
/* blue.90 */
export const KUI_COLOR_BACKGROUND_PRIMARY_STRONGEST = "#001466";
/* blue.40 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAK = "#5f9aff";
/* blue.20 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKER = "#bee2ff";
/* blue.10 */
export const KUI_COLOR_BACKGROUND_PRIMARY_WEAKEST = "#eefaff";
/* green.10 */
export const KUI_COLOR_BACKGROUND_SUCCESS_WEAKEST = "#ecfffb";
/* transparent */
export const KUI_COLOR_BACKGROUND_TRANSPARENT = "rgba(0, 0, 0, 0)";
/* yellow.10 */
export const KUI_COLOR_BACKGROUND_WARNING_WEAKEST = "#fffce0";
/* gray.20 */
export const KUI_COLOR_BORDER = "#e0e4ea";
/* red.60 */
export const KUI_COLOR_BORDER_DANGER = "#d60027";
/* red.70 */
export const KUI_COLOR_BORDER_DANGER_STRONG = "#ad000e";
/* red.80 */
export const KUI_COLOR_BORDER_DANGER_STRONGER = "#850000";
/* red.90 */
export const KUI_COLOR_BORDER_DANGER_STRONGEST = "#5c0000";
/* red.40 */
export const KUI_COLOR_BORDER_DANGER_WEAK = "#ff3954";
/* red.20 */
export const KUI_COLOR_BORDER_DANGER_WEAKER = "#ffabab";
/* red.10 */
export const KUI_COLOR_BORDER_DANGER_WEAKEST = "#ffe5e5";
/* purple.60 */
export const KUI_COLOR_BORDER_DECORATIVE = "#6f28ff";
/* gray.20 */
export const KUI_COLOR_BORDER_DISABLED = "#e0e4ea";
/* gray.40 */
export const KUI_COLOR_BORDER_NEUTRAL_WEAK = "#afb7c5";
/* blue.60 */
export const KUI_COLOR_BORDER_PRIMARY = "#0044f4";
/* blue.70 */
export const KUI_COLOR_BORDER_PRIMARY_STRONG = "#0030cc";
/* blue.80 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGER = "#002099";
/* blue.90 */
export const KUI_COLOR_BORDER_PRIMARY_STRONGEST = "#001466";
/* blue.40 */
export const KUI_COLOR_BORDER_PRIMARY_WEAK = "#5f9aff";
/* blue.20 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKER = "#bee2ff";
/* blue.10 */
export const KUI_COLOR_BORDER_PRIMARY_WEAKEST = "#eefaff";
/* transparent */
export const KUI_COLOR_BORDER_TRANSPARENT = "rgba(0, 0, 0, 0)";
/* blue.100 */
export const KUI_COLOR_TEXT = "#000933";
/* red.60 */
export const KUI_COLOR_TEXT_DANGER = "#d60027";
/* aqua.50 */
export const KUI_COLOR_TEXT_DECORATIVE = "#00abd2";
/* gray.50 */
export const KUI_COLOR_TEXT_DISABLED = "#828a9e";
/* white */
export const KUI_COLOR_TEXT_INVERSE = "#ffffff";
/* gray.60 */
export const KUI_COLOR_TEXT_NEUTRAL = "#6c7489";
/* gray.70 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONG = "#52596e";
/* gray.80 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGER = "#3a3f51";
/* gray.90 */
export const KUI_COLOR_TEXT_NEUTRAL_STRONGEST = "#232633";
/* gray.40 */
export const KUI_COLOR_TEXT_NEUTRAL_WEAK = "#afb7c5";
/* blue.60 */
export const KUI_COLOR_TEXT_PRIMARY = "#0044f4";
/* blue.70 */
export const KUI_COLOR_TEXT_PRIMARY_STRONG = "#0030cc";
/* blue.80 */
export const KUI_COLOR_TEXT_PRIMARY_STRONGER = "#002099";
/* green.60 */
export const KUI_COLOR_TEXT_SUCCESS = "#007d60";
/* yellow.60 */
export const KUI_COLOR_TEXT_WARNING = "#995c00";
export const KUI_BORDER_RADIUS_0 = "0px";

@@ -251,4 +1275,6 @@ export const KUI_BORDER_RADIUS_10 = "2px";

export const KUI_BORDER_RADIUS_40 = "8px";
export const KUI_BORDER_RADIUS_CIRCLE = "50%"; /* Used to create a circle. Value of 50% */
export const KUI_BORDER_RADIUS_ROUND = "100px"; /* Used to round element corners. Value of 100px */
/* Used to create a circle. Value of 50% */
export const KUI_BORDER_RADIUS_CIRCLE = "50%";
/* Used to round element corners. Value of 100px */
export const KUI_BORDER_RADIUS_ROUND = "100px";
export const KUI_BORDER_WIDTH_0 = "0px";

@@ -258,7 +1284,12 @@ export const KUI_BORDER_WIDTH_10 = "1px";

export const KUI_BORDER_WIDTH_30 = "4px";
export const KUI_BREAKPOINT_MOBILE = "640px"; /* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
export const KUI_BREAKPOINT_PHABLET = "768px"; /* Used for tablet screens. */
export const KUI_BREAKPOINT_TABLET = "1024px"; /* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
export const KUI_BREAKPOINT_LAPTOP = "1280px"; /* Used for standard desktop screens. */
export const KUI_BREAKPOINT_DESKTOP = "1536px"; /* Used for larger desktop screens. */
/* Used for larger mobile screens. Anything viewport width under this value is considered mobile. */
export const KUI_BREAKPOINT_MOBILE = "640px";
/* Used for tablet screens. */
export const KUI_BREAKPOINT_PHABLET = "768px";
/* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. */
export const KUI_BREAKPOINT_TABLET = "1024px";
/* Used for standard desktop screens. */
export const KUI_BREAKPOINT_LAPTOP = "1280px";
/* Used for larger desktop screens. */
export const KUI_BREAKPOINT_DESKTOP = "1536px";
export const KUI_ICON_SIZE_10 = "10px";

@@ -268,26 +1299,47 @@ export const KUI_ICON_SIZE_20 = "12px";

export const KUI_ICON_SIZE_40 = "20px";
export const KUI_ICON_SIZE_50 = "24px"; /* The default icon size */
/* The default icon size */
export const KUI_ICON_SIZE_50 = "24px";
export const KUI_ICON_SIZE_60 = "32px";
export const KUI_ICON_SIZE_70 = "40px";
export const KUI_ICON_SIZE_80 = "48px";
export const KUI_METHOD_COLOR_BACKGROUND_CONNECT = "#f1f0ff"; /* purple.10 */
export const KUI_METHOD_COLOR_BACKGROUND_DELETE = "#ffe5e5"; /* red.10 */
export const KUI_METHOD_COLOR_BACKGROUND_GET = "#eefaff"; /* blue.10 */
export const KUI_METHOD_COLOR_BACKGROUND_HEAD = "#6c7489"; /* gray.60 */
export const KUI_METHOD_COLOR_BACKGROUND_OPTIONS = "#f9fafb"; /* gray.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PATCH = "#ecfcff"; /* aqua.10 */
export const KUI_METHOD_COLOR_BACKGROUND_POST = "#ecfffb"; /* green.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PUT = "#fffce0"; /* yellow.10 */
export const KUI_METHOD_COLOR_BACKGROUND_TRACE = "#fff0f7"; /* pink.10 */
export const KUI_METHOD_COLOR_TEXT_CONNECT = "#6f28ff"; /* purple.60 */
export const KUI_METHOD_COLOR_TEXT_DELETE = "#d60027"; /* red.60 */
export const KUI_METHOD_COLOR_TEXT_GET = "#0044f4"; /* blue.60 */
export const KUI_METHOD_COLOR_TEXT_HEAD = "#f9fafb"; /* gray.10 */
export const KUI_METHOD_COLOR_TEXT_OPTIONS = "#6c7489"; /* gray.60 */
export const KUI_METHOD_COLOR_TEXT_PATCH = "#00819d"; /* aqua.60 */
export const KUI_METHOD_COLOR_TEXT_POST = "#007d60"; /* green.60 */
export const KUI_METHOD_COLOR_TEXT_PUT = "#995c00"; /* yellow.60 */
export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067"; /* pink.60 */
export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace"; /* The standard monospace font family. */
export const KUI_FONT_FAMILY_TEXT = "'Inter', Roboto, Helvetica, sans-serif"; /* The standard text font family. */
/* purple.10 */
export const KUI_METHOD_COLOR_BACKGROUND_CONNECT = "#f1f0ff";
/* red.10 */
export const KUI_METHOD_COLOR_BACKGROUND_DELETE = "#ffe5e5";
/* blue.10 */
export const KUI_METHOD_COLOR_BACKGROUND_GET = "#eefaff";
/* gray.60 */
export const KUI_METHOD_COLOR_BACKGROUND_HEAD = "#6c7489";
/* gray.10 */
export const KUI_METHOD_COLOR_BACKGROUND_OPTIONS = "#f9fafb";
/* aqua.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PATCH = "#ecfcff";
/* green.10 */
export const KUI_METHOD_COLOR_BACKGROUND_POST = "#ecfffb";
/* yellow.10 */
export const KUI_METHOD_COLOR_BACKGROUND_PUT = "#fffce0";
/* pink.10 */
export const KUI_METHOD_COLOR_BACKGROUND_TRACE = "#fff0f7";
/* purple.60 */
export const KUI_METHOD_COLOR_TEXT_CONNECT = "#6f28ff";
/* red.60 */
export const KUI_METHOD_COLOR_TEXT_DELETE = "#d60027";
/* blue.60 */
export const KUI_METHOD_COLOR_TEXT_GET = "#0044f4";
/* gray.10 */
export const KUI_METHOD_COLOR_TEXT_HEAD = "#f9fafb";
/* gray.60 */
export const KUI_METHOD_COLOR_TEXT_OPTIONS = "#6c7489";
/* aqua.60 */
export const KUI_METHOD_COLOR_TEXT_PATCH = "#00819d";
/* green.60 */
export const KUI_METHOD_COLOR_TEXT_POST = "#007d60";
/* yellow.60 */
export const KUI_METHOD_COLOR_TEXT_PUT = "#995c00";
/* pink.60 */
export const KUI_METHOD_COLOR_TEXT_TRACE = "#d60067";
/* The standard monospace font family. */
export const KUI_FONT_FAMILY_CODE = "'JetBrains Mono', Consolas, monospace";
/* The standard text font family. */
export const KUI_FONT_FAMILY_TEXT = "'Inter', Roboto, Helvetica, sans-serif";
export const KUI_FONT_SIZE_10 = "10px";

@@ -303,33 +1355,64 @@ export const KUI_FONT_SIZE_20 = "12px";

export const KUI_FONT_SIZE_100 = "48px";
export const KUI_FONT_WEIGHT_BOLD = "700"; /* 700 */
export const KUI_FONT_WEIGHT_MEDIUM = "500"; /* 500 */
export const KUI_FONT_WEIGHT_REGULAR = "400"; /* 400: The normal font weight. */
export const KUI_FONT_WEIGHT_SEMIBOLD = "600"; /* 600 */
export const KUI_LINE_HEIGHT_10 = "12px"; /* 12px */
export const KUI_LINE_HEIGHT_20 = "16px"; /* 16px */
export const KUI_LINE_HEIGHT_30 = "20px"; /* 20px */
export const KUI_LINE_HEIGHT_40 = "24px"; /* 24px */
export const KUI_LINE_HEIGHT_50 = "28px"; /* 28px */
export const KUI_LINE_HEIGHT_60 = "32px"; /* 32px */
export const KUI_LINE_HEIGHT_70 = "36px"; /* 36px */
export const KUI_LINE_HEIGHT_80 = "40px"; /* 40px */
export const KUI_LINE_HEIGHT_90 = "48px"; /* 48px */
export const KUI_LINE_HEIGHT_100 = "56px"; /* 56px */
export const KUI_SPACE_0 = "0px"; /* 0px */
export const KUI_SPACE_10 = "2px"; /* 2px */
export const KUI_SPACE_20 = "4px"; /* 4px */
export const KUI_SPACE_30 = "6px"; /* 6px */
export const KUI_SPACE_40 = "8px"; /* 8px */
export const KUI_SPACE_50 = "12px"; /* 12px */
export const KUI_SPACE_60 = "16px"; /* 16px */
export const KUI_SPACE_70 = "20px"; /* 20px */
export const KUI_SPACE_80 = "24px"; /* 24px */
export const KUI_SPACE_90 = "32px"; /* 32px */
export const KUI_SPACE_100 = "40px"; /* 40px */
export const KUI_SPACE_110 = "48px"; /* 48px */
export const KUI_SPACE_120 = "56px"; /* 56px */
export const KUI_SPACE_130 = "64px"; /* 64px */
export const KUI_SPACE_140 = "80px"; /* 80px */
export const KUI_SPACE_150 = "96px"; /* 96px */
export const KUI_SPACE_AUTO = "auto"; /* auto */
/* 700 */
export const KUI_FONT_WEIGHT_BOLD = "700";
/* 500 */
export const KUI_FONT_WEIGHT_MEDIUM = "500";
/* 400: The normal font weight. */
export const KUI_FONT_WEIGHT_REGULAR = "400";
/* 600 */
export const KUI_FONT_WEIGHT_SEMIBOLD = "600";
/* 12px */
export const KUI_LINE_HEIGHT_10 = "12px";
/* 16px */
export const KUI_LINE_HEIGHT_20 = "16px";
/* 20px */
export const KUI_LINE_HEIGHT_30 = "20px";
/* 24px */
export const KUI_LINE_HEIGHT_40 = "24px";
/* 28px */
export const KUI_LINE_HEIGHT_50 = "28px";
/* 32px */
export const KUI_LINE_HEIGHT_60 = "32px";
/* 36px */
export const KUI_LINE_HEIGHT_70 = "36px";
/* 40px */
export const KUI_LINE_HEIGHT_80 = "40px";
/* 48px */
export const KUI_LINE_HEIGHT_90 = "48px";
/* 56px */
export const KUI_LINE_HEIGHT_100 = "56px";
/* 0px */
export const KUI_SPACE_0 = "0px";
/* 2px */
export const KUI_SPACE_10 = "2px";
/* 4px */
export const KUI_SPACE_20 = "4px";
/* 6px */
export const KUI_SPACE_30 = "6px";
/* 8px */
export const KUI_SPACE_40 = "8px";
/* 12px */
export const KUI_SPACE_50 = "12px";
/* 16px */
export const KUI_SPACE_60 = "16px";
/* 20px */
export const KUI_SPACE_70 = "20px";
/* 24px */
export const KUI_SPACE_80 = "24px";
/* 32px */
export const KUI_SPACE_90 = "32px";
/* 40px */
export const KUI_SPACE_100 = "40px";
/* 48px */
export const KUI_SPACE_110 = "48px";
/* 56px */
export const KUI_SPACE_120 = "56px";
/* 64px */
export const KUI_SPACE_130 = "64px";
/* 80px */
export const KUI_SPACE_140 = "80px";
/* 96px */
export const KUI_SPACE_150 = "96px";
/* auto */
export const KUI_SPACE_AUTO = "auto";
```

@@ -339,167 +1422,159 @@

## CSS Variables
### JSON
**IMPORTANT**: You should **never** import the `@kong/design-tokens/tokens/css/variables.css` file in your host project.
While CSS variables are _utilized_ in Kong's repositories to allow for CSS customization, the variables themselves are never actually provided values or imported from this package.
The purpose of the `@kong/design-tokens/tokens/css/variables.css` file is to provide a list of all available CSS variables, to utilize alongside auto-complete extensions in your IDE, etc.
If you want to customize default token values, provided the element(s) in question utilize CSS variable fallbacks, simply set the variables from this list to your desired value within your host application, scoped inside your desired CSS selector, and it will override the default value.
You may scope your CSS variable overrides inside the `:root` selector as shown here, or inside any other valid CSS selector.
<details>
<summary>Click to view the list of CSS variables</summary>
<summary>Click to view the exported JSON object</summary>
```scss
--kui-color-background: initial; /* white. Default value: `#ffffff` */
--kui-color-background-danger: initial; /* red.60. Default value: `#d60027` */
--kui-color-background-danger-strong: initial; /* red.70. Default value: `#ad000e` */
--kui-color-background-danger-stronger: initial; /* red.80. Default value: `#850000` */
--kui-color-background-danger-strongest: initial; /* red.90. Default value: `#5c0000` */
--kui-color-background-danger-weak: initial; /* red.40. Default value: `#ff3954` */
--kui-color-background-danger-weaker: initial; /* red.20. Default value: `#ffabab` */
--kui-color-background-danger-weakest: initial; /* red.10. Default value: `#ffe5e5` */
--kui-color-background-disabled: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-background-inverse: initial; /* blue.100. Default value: `#000933` */
--kui-color-background-neutral: initial; /* gray.60. Default value: `#6c7489` */
--kui-color-background-neutral-strong: initial; /* gray.70. Default value: `#52596e` */
--kui-color-background-neutral-stronger: initial; /* gray.80. Default value: `#3a3f51` */
--kui-color-background-neutral-strongest: initial; /* gray.90. Default value: `#232633` */
--kui-color-background-neutral-weak: initial; /* gray.40. Default value: `#afb7c5` */
--kui-color-background-neutral-weaker: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-background-neutral-weakest: initial; /* gray.10. Default value: `#f9fafb` */
--kui-color-background-primary: initial; /* blue.60. Default value: `#0044f4` */
--kui-color-background-primary-strong: initial; /* blue.70. Default value: `#0030cc` */
--kui-color-background-primary-stronger: initial; /* blue.80. Default value: `#002099` */
--kui-color-background-primary-strongest: initial; /* blue.90. Default value: `#001466` */
--kui-color-background-primary-weak: initial; /* blue.40. Default value: `#5f9aff` */
--kui-color-background-primary-weaker: initial; /* blue.20. Default value: `#bee2ff` */
--kui-color-background-primary-weakest: initial; /* blue.10. Default value: `#eefaff` */
--kui-color-background-success-weakest: initial; /* green.10. Default value: `#ecfffb` */
--kui-color-background-transparent: initial; /* transparent. Default value: `rgba(0, 0, 0, 0)` */
--kui-color-background-warning-weakest: initial; /* yellow.10. Default value: `#fffce0` */
--kui-color-border: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-border-danger: initial; /* red.60. Default value: `#d60027` */
--kui-color-border-danger-strong: initial; /* red.70. Default value: `#ad000e` */
--kui-color-border-danger-stronger: initial; /* red.80. Default value: `#850000` */
--kui-color-border-danger-strongest: initial; /* red.90. Default value: `#5c0000` */
--kui-color-border-danger-weak: initial; /* red.40. Default value: `#ff3954` */
--kui-color-border-danger-weaker: initial; /* red.20. Default value: `#ffabab` */
--kui-color-border-danger-weakest: initial; /* red.10. Default value: `#ffe5e5` */
--kui-color-border-decorative: initial; /* purple.60. Default value: `#6f28ff` */
--kui-color-border-disabled: initial; /* gray.20. Default value: `#e0e4ea` */
--kui-color-border-neutral-weak: initial; /* gray.40. Default value: `#afb7c5` */
--kui-color-border-primary: initial; /* blue.60. Default value: `#0044f4` */
--kui-color-border-primary-strong: initial; /* blue.70. Default value: `#0030cc` */
--kui-color-border-primary-stronger: initial; /* blue.80. Default value: `#002099` */
--kui-color-border-primary-strongest: initial; /* blue.90. Default value: `#001466` */
--kui-color-border-primary-weak: initial; /* blue.40. Default value: `#5f9aff` */
--kui-color-border-primary-weaker: initial; /* blue.20. Default value: `#bee2ff` */
--kui-color-border-primary-weakest: initial; /* blue.10. Default value: `#eefaff` */
--kui-color-border-transparent: initial; /* transparent. Default value: `rgba(0, 0, 0, 0)` */
--kui-color-text: initial; /* blue.100. Default value: `#000933` */
--kui-color-text-danger: initial; /* red.60. Default value: `#d60027` */
--kui-color-text-decorative: initial; /* aqua.50. Default value: `#00abd2` */
--kui-color-text-disabled: initial; /* gray.50. Default value: `#828a9e` */
--kui-color-text-inverse: initial; /* white. Default value: `#ffffff` */
--kui-color-text-neutral: initial; /* gray.60. Default value: `#6c7489` */
--kui-color-text-neutral-strong: initial; /* gray.70. Default value: `#52596e` */
--kui-color-text-neutral-stronger: initial; /* gray.80. Default value: `#3a3f51` */
--kui-color-text-neutral-strongest: initial; /* gray.90. Default value: `#232633` */
--kui-color-text-neutral-weak: initial; /* gray.40. Default value: `#afb7c5` */
--kui-color-text-primary: initial; /* blue.60. Default value: `#0044f4` */
--kui-color-text-primary-strong: initial; /* blue.70. Default value: `#0030cc` */
--kui-color-text-primary-stronger: initial; /* blue.80. Default value: `#002099` */
--kui-color-text-success: initial; /* green.60. Default value: `#007d60` */
--kui-color-text-warning: initial; /* yellow.60. Default value: `#995c00` */
--kui-border-radius-0: initial; /* Default value: `0px` */
--kui-border-radius-10: initial; /* Default value: `2px` */
--kui-border-radius-20: initial; /* Default value: `4px` */
--kui-border-radius-30: initial; /* Default value: `6px` */
--kui-border-radius-40: initial; /* Default value: `8px` */
--kui-border-radius-circle: initial; /* Used to create a circle. Value of 50%. Default value: `50%` */
--kui-border-radius-round: initial; /* Used to round element corners. Value of 100px. Default value: `100px` */
--kui-border-width-0: initial; /* Default value: `0px` */
--kui-border-width-10: initial; /* Default value: `1px` */
--kui-border-width-20: initial; /* Default value: `2px` */
--kui-border-width-30: initial; /* Default value: `4px` */
--kui-breakpoint-mobile: initial; /* Used for larger mobile screens. Anything viewport width under this value is considered mobile. Default value: `640px` */
--kui-breakpoint-phablet: initial; /* Used for tablet screens. Default value: `768px` */
--kui-breakpoint-tablet: initial; /* Used for larger tablet screens. Any viewport width less than this value will likely show a mobile layout. Any viewport width this value and greater will likely show a desktop layout. Default value: `1024px` */
--kui-breakpoint-laptop: initial; /* Used for standard desktop screens. Default value: `1280px` */
--kui-breakpoint-desktop: initial; /* Used for larger desktop screens. Default value: `1536px` */
--kui-icon-size-10: initial; /* Default value: `10px` */
--kui-icon-size-20: initial; /* Default value: `12px` */
--kui-icon-size-30: initial; /* Default value: `16px` */
--kui-icon-size-40: initial; /* Default value: `20px` */
--kui-icon-size-50: initial; /* The default icon size. Default value: `24px` */
--kui-icon-size-60: initial; /* Default value: `32px` */
--kui-icon-size-70: initial; /* Default value: `40px` */
--kui-icon-size-80: initial; /* Default value: `48px` */
--kui-method-color-background-connect: initial; /* purple.10. Default value: `#f1f0ff` */
--kui-method-color-background-delete: initial; /* red.10. Default value: `#ffe5e5` */
--kui-method-color-background-get: initial; /* blue.10. Default value: `#eefaff` */
--kui-method-color-background-head: initial; /* gray.60. Default value: `#6c7489` */
--kui-method-color-background-options: initial; /* gray.10. Default value: `#f9fafb` */
--kui-method-color-background-patch: initial; /* aqua.10. Default value: `#ecfcff` */
--kui-method-color-background-post: initial; /* green.10. Default value: `#ecfffb` */
--kui-method-color-background-put: initial; /* yellow.10. Default value: `#fffce0` */
--kui-method-color-background-trace: initial; /* pink.10. Default value: `#fff0f7` */
--kui-method-color-text-connect: initial; /* purple.60. Default value: `#6f28ff` */
--kui-method-color-text-delete: initial; /* red.60. Default value: `#d60027` */
--kui-method-color-text-get: initial; /* blue.60. Default value: `#0044f4` */
--kui-method-color-text-head: initial; /* gray.10. Default value: `#f9fafb` */
--kui-method-color-text-options: initial; /* gray.60. Default value: `#6c7489` */
--kui-method-color-text-patch: initial; /* aqua.60. Default value: `#00819d` */
--kui-method-color-text-post: initial; /* green.60. Default value: `#007d60` */
--kui-method-color-text-put: initial; /* yellow.60. Default value: `#995c00` */
--kui-method-color-text-trace: initial; /* pink.60. Default value: `#d60067` */
--kui-font-family-code: initial; /* The standard monospace font family. Default value: `'JetBrains Mono', Consolas, monospace` */
--kui-font-family-text: initial; /* The standard text font family. Default value: `'Inter', Roboto, Helvetica, sans-serif` */
--kui-font-size-10: initial; /* Default value: `10px` */
--kui-font-size-20: initial; /* Default value: `12px` */
--kui-font-size-30: initial; /* Default value: `14px` */
--kui-font-size-40: initial; /* Default value: `16px` */
--kui-font-size-50: initial; /* Default value: `18px` */
--kui-font-size-60: initial; /* Default value: `20px` */
--kui-font-size-70: initial; /* Default value: `24px` */
--kui-font-size-80: initial; /* Default value: `32px` */
--kui-font-size-90: initial; /* Default value: `40px` */
--kui-font-size-100: initial; /* Default value: `48px` */
--kui-font-weight-bold: initial; /* 700. Default value: `700` */
--kui-font-weight-medium: initial; /* 500. Default value: `500` */
--kui-font-weight-regular: initial; /* 400: The normal font weight. Default value: `400` */
--kui-font-weight-semibold: initial; /* 600. Default value: `600` */
--kui-line-height-10: initial; /* 12px. Default value: `12px` */
--kui-line-height-20: initial; /* 16px. Default value: `16px` */
--kui-line-height-30: initial; /* 20px. Default value: `20px` */
--kui-line-height-40: initial; /* 24px. Default value: `24px` */
--kui-line-height-50: initial; /* 28px. Default value: `28px` */
--kui-line-height-60: initial; /* 32px. Default value: `32px` */
--kui-line-height-70: initial; /* 36px. Default value: `36px` */
--kui-line-height-80: initial; /* 40px. Default value: `40px` */
--kui-line-height-90: initial; /* 48px. Default value: `48px` */
--kui-line-height-100: initial; /* 56px. Default value: `56px` */
--kui-space-0: initial; /* 0px. Default value: `0px` */
--kui-space-10: initial; /* 2px. Default value: `2px` */
--kui-space-20: initial; /* 4px. Default value: `4px` */
--kui-space-30: initial; /* 6px. Default value: `6px` */
--kui-space-40: initial; /* 8px. Default value: `8px` */
--kui-space-50: initial; /* 12px. Default value: `12px` */
--kui-space-60: initial; /* 16px. Default value: `16px` */
--kui-space-70: initial; /* 20px. Default value: `20px` */
--kui-space-80: initial; /* 24px. Default value: `24px` */
--kui-space-90: initial; /* 32px. Default value: `32px` */
--kui-space-100: initial; /* 40px. Default value: `40px` */
--kui-space-110: initial; /* 48px. Default value: `48px` */
--kui-space-120: initial; /* 56px. Default value: `56px` */
--kui-space-130: initial; /* 64px. Default value: `64px` */
--kui-space-140: initial; /* 80px. Default value: `80px` */
--kui-space-150: initial; /* 96px. Default value: `96px` */
--kui-space-auto: initial; /* auto. Default value: `auto` */
```json
{
"kui-color-background": "#ffffff",
"kui-color-background-danger": "#d60027",
"kui-color-background-danger-strong": "#ad000e",
"kui-color-background-danger-stronger": "#850000",
"kui-color-background-danger-strongest": "#5c0000",
"kui-color-background-danger-weak": "#ff3954",
"kui-color-background-danger-weaker": "#ffabab",
"kui-color-background-danger-weakest": "#ffe5e5",
"kui-color-background-disabled": "#e0e4ea",
"kui-color-background-inverse": "#000933",
"kui-color-background-neutral": "#6c7489",
"kui-color-background-neutral-strong": "#52596e",
"kui-color-background-neutral-stronger": "#3a3f51",
"kui-color-background-neutral-strongest": "#232633",
"kui-color-background-neutral-weak": "#afb7c5",
"kui-color-background-neutral-weaker": "#e0e4ea",
"kui-color-background-neutral-weakest": "#f9fafb",
"kui-color-background-primary": "#0044f4",
"kui-color-background-primary-strong": "#0030cc",
"kui-color-background-primary-stronger": "#002099",
"kui-color-background-primary-strongest": "#001466",
"kui-color-background-primary-weak": "#5f9aff",
"kui-color-background-primary-weaker": "#bee2ff",
"kui-color-background-primary-weakest": "#eefaff",
"kui-color-background-success-weakest": "#ecfffb",
"kui-color-background-transparent": "rgba(0, 0, 0, 0)",
"kui-color-background-warning-weakest": "#fffce0",
"kui-color-border": "#e0e4ea",
"kui-color-border-danger": "#d60027",
"kui-color-border-danger-strong": "#ad000e",
"kui-color-border-danger-stronger": "#850000",
"kui-color-border-danger-strongest": "#5c0000",
"kui-color-border-danger-weak": "#ff3954",
"kui-color-border-danger-weaker": "#ffabab",
"kui-color-border-danger-weakest": "#ffe5e5",
"kui-color-border-decorative": "#6f28ff",
"kui-color-border-disabled": "#e0e4ea",
"kui-color-border-neutral-weak": "#afb7c5",
"kui-color-border-primary": "#0044f4",
"kui-color-border-primary-strong": "#0030cc",
"kui-color-border-primary-stronger": "#002099",
"kui-color-border-primary-strongest": "#001466",
"kui-color-border-primary-weak": "#5f9aff",
"kui-color-border-primary-weaker": "#bee2ff",
"kui-color-border-primary-weakest": "#eefaff",
"kui-color-border-transparent": "rgba(0, 0, 0, 0)",
"kui-color-text": "#000933",
"kui-color-text-danger": "#d60027",
"kui-color-text-decorative": "#00abd2",
"kui-color-text-disabled": "#828a9e",
"kui-color-text-inverse": "#ffffff",
"kui-color-text-neutral": "#6c7489",
"kui-color-text-neutral-strong": "#52596e",
"kui-color-text-neutral-stronger": "#3a3f51",
"kui-color-text-neutral-strongest": "#232633",
"kui-color-text-neutral-weak": "#afb7c5",
"kui-color-text-primary": "#0044f4",
"kui-color-text-primary-strong": "#0030cc",
"kui-color-text-primary-stronger": "#002099",
"kui-color-text-success": "#007d60",
"kui-color-text-warning": "#995c00",
"kui-border-radius-0": "0px",
"kui-border-radius-10": "2px",
"kui-border-radius-20": "4px",
"kui-border-radius-30": "6px",
"kui-border-radius-40": "8px",
"kui-border-radius-circle": "50%",
"kui-border-radius-round": "100px",
"kui-border-width-0": "0px",
"kui-border-width-10": "1px",
"kui-border-width-20": "2px",
"kui-border-width-30": "4px",
"kui-breakpoint-mobile": "640px",
"kui-breakpoint-phablet": "768px",
"kui-breakpoint-tablet": "1024px",
"kui-breakpoint-laptop": "1280px",
"kui-breakpoint-desktop": "1536px",
"kui-icon-size-10": "10px",
"kui-icon-size-20": "12px",
"kui-icon-size-30": "16px",
"kui-icon-size-40": "20px",
"kui-icon-size-50": "24px",
"kui-icon-size-60": "32px",
"kui-icon-size-70": "40px",
"kui-icon-size-80": "48px",
"kui-method-color-background-connect": "#f1f0ff",
"kui-method-color-background-delete": "#ffe5e5",
"kui-method-color-background-get": "#eefaff",
"kui-method-color-background-head": "#6c7489",
"kui-method-color-background-options": "#f9fafb",
"kui-method-color-background-patch": "#ecfcff",
"kui-method-color-background-post": "#ecfffb",
"kui-method-color-background-put": "#fffce0",
"kui-method-color-background-trace": "#fff0f7",
"kui-method-color-text-connect": "#6f28ff",
"kui-method-color-text-delete": "#d60027",
"kui-method-color-text-get": "#0044f4",
"kui-method-color-text-head": "#f9fafb",
"kui-method-color-text-options": "#6c7489",
"kui-method-color-text-patch": "#00819d",
"kui-method-color-text-post": "#007d60",
"kui-method-color-text-put": "#995c00",
"kui-method-color-text-trace": "#d60067",
"kui-font-family-code": "'JetBrains Mono', Consolas, monospace",
"kui-font-family-text": "'Inter', Roboto, Helvetica, sans-serif",
"kui-font-size-10": "10px",
"kui-font-size-20": "12px",
"kui-font-size-30": "14px",
"kui-font-size-40": "16px",
"kui-font-size-50": "18px",
"kui-font-size-60": "20px",
"kui-font-size-70": "24px",
"kui-font-size-80": "32px",
"kui-font-size-90": "40px",
"kui-font-size-100": "48px",
"kui-font-weight-bold": "700",
"kui-font-weight-medium": "500",
"kui-font-weight-regular": "400",
"kui-font-weight-semibold": "600",
"kui-line-height-10": "12px",
"kui-line-height-20": "16px",
"kui-line-height-30": "20px",
"kui-line-height-40": "24px",
"kui-line-height-50": "28px",
"kui-line-height-60": "32px",
"kui-line-height-70": "36px",
"kui-line-height-80": "40px",
"kui-line-height-90": "48px",
"kui-line-height-100": "56px",
"kui-space-0": "0px",
"kui-space-10": "2px",
"kui-space-20": "4px",
"kui-space-30": "6px",
"kui-space-40": "8px",
"kui-space-50": "12px",
"kui-space-60": "16px",
"kui-space-70": "20px",
"kui-space-80": "24px",
"kui-space-90": "32px",
"kui-space-100": "40px",
"kui-space-110": "48px",
"kui-space-120": "56px",
"kui-space-130": "64px",
"kui-space-140": "80px",
"kui-space-150": "96px",
"kui-space-auto": "auto"
}
```
</details>
dist/tokens/css/variables.css
dist/tokens/js/index.mjs

Sorry, the diff of this file is not supported yet

dist/tokens/scss/_mixins.scss

Sorry, the diff of this file is not supported yet

dist/tokens/scss/_variables.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc