New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@kong/design-tokens
Advanced tools
@kong/design-tokens - npm Package Compare versions
Comparing version 1.3.1-pr.31.57194a3.0 to 1.3.1-pr.31.6aa3108.0
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 06 Jul 2023 15:24:41 GMT | ||
| * Generated on Thu, 06 Jul 2023 16:31:24 GMT | ||
| * | ||
@@ -5,0 +5,0 @@ * Kong Design Tokens |
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 06 Jul 2023 15:24:41 GMT | ||
| * Generated on Thu, 06 Jul 2023 16:31:24 GMT | ||
| * | ||
@@ -5,0 +5,0 @@ * Kong Design Tokens |
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 06 Jul 2023 15:24:41 GMT | ||
| * Generated on Thu, 06 Jul 2023 16:31:24 GMT | ||
| * | ||
@@ -5,0 +5,0 @@ * Kong Design Tokens |
| <!-- | ||
| * Do not edit directly | ||
| * Generated on Thu, 06 Jul 2023 15:24:41 GMT | ||
| * Generated on Thu, 06 Jul 2023 16:31:24 GMT | ||
| * | ||
@@ -316,4 +316,6 @@ * Kong Design Tokens | ||
| The purpose of the `@kong/design-tokens/tokens/css/variables.css` file is to provide a list of all available CSS variables. | ||
| 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. | ||
@@ -323,4 +325,2 @@ | ||
| 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. | ||
| <details> | ||
@@ -330,143 +330,143 @@ | ||
| ```css | ||
| --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-desktop: initial; /* Used for larger desktop screens. Default value: `1536px` */ | ||
| --kui-breakpoint-laptop: initial; /* Used for standard desktop screens. Default value: `1280px` */ | ||
| --kui-breakpoint-mobile: initial; /* Used for larger mobile screens. Anything 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 is considered a mobile layout. Any viewport width this size and greater is considered a desktop layout. Default value: `1024px` */ | ||
| --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` */ | ||
| ```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-desktop: initial; /* Used for larger desktop screens. Default value: `1536px` */ | ||
| --kui-breakpoint-laptop: initial; /* Used for standard desktop screens. Default value: `1280px` */ | ||
| --kui-breakpoint-mobile: initial; /* Used for larger mobile screens. Anything 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 is considered a mobile layout. Any viewport width this size and greater is considered a desktop layout. Default value: `1024px` */ | ||
| --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` */ | ||
| ``` | ||
| </details> |
| { | ||
| "name": "@kong/design-tokens", | ||
| "version": "1.3.1-pr.31.57194a3.0", | ||
| "version": "1.3.1-pr.31.6aa3108.0", | ||
| "description": "Kong UI Design Tokens and style dictionary", | ||
| "scripts": { | ||
| "build": "yarn build:clean && style-dictionary build && yarn copy:tokens-md", | ||
| "build": "yarn build:clean && style-dictionary build && yarn copy:tokens-doc", | ||
| "build:clean": "rimraf ./dist", | ||
| "copy:tokens-md": "copy-file dist/tokens/README.md TOKENS.md", | ||
| "copy:tokens-doc": "shx cp -f './dist/tokens/README.md' './TOKENS.md'", | ||
| "lint": "eslint '**/*.{js,ts,vue,json}'", | ||
@@ -63,3 +63,2 @@ "lint:fix": "eslint '**/*.{js,ts,vue,json}' --fix", | ||
| "commitizen": "^4.3.0", | ||
| "copy-file-util": "^1.1.0", | ||
| "cz-conventional-changelog": "^3.3.0", | ||
@@ -77,2 +76,3 @@ "eslint": "^8.34.0", | ||
| "semantic-release": "^20.1.0", | ||
| "shx": "^0.3.4", | ||
| "style-dictionary": "^3.8.0", | ||
@@ -79,0 +79,0 @@ "typescript": "^4.9.5", |
184
README.md
@@ -10,14 +10,16 @@ # Kong UI Design Tokens | ||
| - [Tokens](#tokens) | ||
| - [Token Requirements](#token-requirements) | ||
| - [Token Formats](#token-formats) | ||
| - [SCSS Variables](#scss-variables) | ||
| - [JavaScript Variables](#javascript-variables) | ||
| - [CSS Variables](#css-variables) | ||
| - [Usage](#usage) | ||
| - [Installation](#installation) | ||
| - [Recommended VS Code extension](#recommended-vs-code-extension) | ||
| - [Standalone components](#standalone-components) | ||
| - [Host applications](#host-applications) | ||
| - [Updating Tokens \& Local Development](#updating-tokens--local-development) | ||
| - [Token Requirements](#token-requirements) | ||
| - [Development Sandbox](#development-sandbox) | ||
| - [Lint and fix](#lint-and-fix) | ||
| - [Build for production](#build-for-production) | ||
| - [VS Code extension](#vs-code-extension) | ||
| - [Token Update Workflow](#token-update-workflow) | ||
@@ -33,55 +35,2 @@ - [Committing Changes](#committing-changes) | ||
| ### Token Requirements | ||
| - Tokens **must** be defined in the corresponding JSON files within the `/tokens` directory in one of two sub-directories: | ||
| Directory | Description | ||
| ---------|---------- | ||
| `/tokens/alias` | The `alias` directory **must** only contain alias values that point directly to a raw CSS value. Any tokens defined within the `alias` directory **will not** be exposed in the package exports. Tokens defined in the `/tokens/alias/` directory can be utilized/referenced within the `/tokens/source/` files; however, these tokens will **NOT** be exported in the build files. | ||
| `/tokens/source` | The `source` directory contains all tokens that **will be** available for consumption from the package exports. | ||
| - Token keys **must** be lowercase, snake_case, and defined in normal alphabetical order (rules enforced by the eslint config) | ||
| - The `category` of each token should be its own directory (e.g. `tokens/color/`) | ||
| - Each `type` of token should be a file in the `category` directory, named `{type}.json` (e.g. `tokens/color/background.json`) | ||
| - If there is only a single `type` of token within a `category`, you **should** name the file `index.json` (e.g. `tokens/line-height/index.json`) | ||
| - Component tokens **must** be defined within the `/tokens/source/components/` directory. All tokens for a component should be defined in a single JSON file, `{component-name}.json`, with the name of the component as the top-level property in the file. | ||
| - Token aliases (e.g. color aliases) **must not** be exposed/exported from the package exports | ||
| - Tokens at the "root" of their structure **must** be defined with a key of `"_"` to allow for nested child tokens. | ||
| <details> | ||
| <summary>Click to view an example of root-level tokens</summary> | ||
| ```json | ||
| { | ||
| "color": { | ||
| "text": { | ||
| "_": { | ||
| "comment": "blue-100", | ||
| "value": "{color.alias.blue.100}" | ||
| }, | ||
| "neutral": { | ||
| "_": { | ||
| "comment": "gray-100", | ||
| "value": "{color.alias.gray.60}" | ||
| }, | ||
| "strong": { | ||
| "comment": "gray-70", | ||
| "value": "{color.alias.gray.70}" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| ```css | ||
| /* Output */ | ||
| --kui-color-text: #000933; | ||
| --kui-color-text-neutral: #6c7489; | ||
| --kui-color-text-neutral-strong: #52596e; | ||
| ``` | ||
| </details> | ||
| ### Token Formats | ||
@@ -91,4 +40,5 @@ | ||
| - SCSS variables | ||
| - JavaScript tokens (ESM and CJS), along with corresponding TypeScript types | ||
| - [SCSS variables](#scss-variables) | ||
| - [JavaScript variables](#javascript-variables) (ESM and CJS), along with corresponding TypeScript types | ||
| - [CSS variables](#css-variables) (**for reference only**) | ||
@@ -133,2 +83,38 @@ Exports are available from the package root, meaning you do not need to include the `dist/` directory in your imports: | ||
| ### JavaScript Variables | ||
| JavaScript variables can be utilized in your project's component files, or other JavaScript/TypeScript files. | ||
| To use the JavaScript variables, simply import the variables you need into your component/file: | ||
| ```ts | ||
| import { KUI_COLOR_BACKGROUND_PRIMARY_STRONG } from '@kong/design-tokens/tokens/js' | ||
| ``` | ||
| ### CSS Variables | ||
| **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. | ||
| ```html | ||
| <style> | ||
| // You may scope the variable to `root:` to impact the whole application... | ||
| :root { | ||
| --kui-color-text-primary: green; | ||
| } | ||
| // ...or scope the variable to a specific container to keep the changes isolated | ||
| table .my-table-row { | ||
| --kui-color-text-primary: purple; | ||
| } | ||
| </style> | ||
| ``` | ||
| ## Usage | ||
@@ -150,2 +136,18 @@ | ||
| ### Recommended VS Code extension | ||
| To get auto-completion of the SCSS variables in your project within VS Code, you can add the [SCSS IntelliSense extension](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) to VS Code on your machine along with the corresponding settings object which will auto-import the variables for auto-completion. Notice that we are explicitly **not excluding** `node_modules`: | ||
| ```jsonc | ||
| // settings.json | ||
| { | ||
| "scss.scannerExclude": [ | ||
| "**/.git", | ||
| "**/bower_components" | ||
| ] | ||
| } | ||
| ``` | ||
| If you are installing the package as a `devDependency` in your project, you can add a `/.vscode/settings.json` file into your project that will enforce these settings in your project for all developers. | ||
| ### Standalone components | ||
@@ -245,2 +247,55 @@ | ||
| ### Token Requirements | ||
| - Tokens **must** be defined in the corresponding JSON files within the `/tokens` directory in one of two sub-directories: | ||
| Directory | Description | ||
| ---------|---------- | ||
| `/tokens/alias` | The `alias` directory **must** only contain alias values that point directly to a raw CSS value. Any tokens defined within the `alias` directory **will not** be exposed in the package exports. Tokens defined in the `/tokens/alias/` directory can be utilized/referenced within the `/tokens/source/` files; however, these tokens will **NOT** be exported in the build files. | ||
| `/tokens/source` | The `source` directory contains all tokens that **will be** available for consumption from the package exports. | ||
| - Token keys **must** be lowercase, snake_case, and defined in normal alphabetical order (rules enforced by the eslint config) | ||
| - The `category` of each token should be its own directory (e.g. `tokens/color/`) | ||
| - Each `type` of token should be a file in the `category` directory, named `{type}.json` (e.g. `tokens/color/background.json`) | ||
| - If there is only a single `type` of token within a `category`, you **should** name the file `index.json` (e.g. `tokens/line-height/index.json`) | ||
| - Component tokens **must** be defined within the `/tokens/source/components/` directory. All tokens for a component should be defined in a single JSON file, `{component-name}.json`, with the name of the component as the top-level property in the file. | ||
| - Token aliases (e.g. color aliases) **must not** be exposed/exported from the package exports | ||
| - Tokens at the "root" of their structure **must** be defined with a key of `"_"` to allow for nested child tokens. | ||
| <details> | ||
| <summary>Click to view an example of root-level tokens</summary> | ||
| ```json | ||
| { | ||
| "color": { | ||
| "text": { | ||
| "_": { | ||
| "comment": "blue-100", | ||
| "value": "{color.alias.blue.100}" | ||
| }, | ||
| "neutral": { | ||
| "_": { | ||
| "comment": "gray-100", | ||
| "value": "{color.alias.gray.60}" | ||
| }, | ||
| "strong": { | ||
| "comment": "gray-70", | ||
| "value": "{color.alias.gray.70}" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| ```css | ||
| /* Output */ | ||
| --kui-color-text: #000933; | ||
| --kui-color-text-neutral: #6c7489; | ||
| --kui-color-text-neutral-strong: #52596e; | ||
| ``` | ||
| </details> | ||
| ### Development Sandbox | ||
@@ -292,17 +347,2 @@ | ||
| ### VS Code extension | ||
| To get auto-completion of the SCSS variables in your project, you can add the [SCSS IntelliSense extension](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) to VS Code on your machine along with the corresponding settings object which will auto-import the variables for auto-completion: | ||
| ```jsonc | ||
| // settings.json | ||
| { | ||
| "scss.scannerExclude": [ | ||
| "**/.git", | ||
| "**/bower_components", | ||
| "**/node_modules/!(@kong/design-tokens)," | ||
| ] | ||
| } | ||
| ``` | ||
| ### Token Update Workflow | ||
@@ -309,0 +349,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.65%
114871
- Lines of code
- increased by0.11%
947
- Number of lines in readme file
- increased by11.8%
379
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes