@liner-fe/design-token-primitive 0.1.0

package/src/constants/color/types.ts

@@ -0,0 +1,240 @@
+import { alphas, alphaPrimitiveKeys, color } from '.';
+
+export interface IPrimitive {
+  'lp-pri-achromatic-white': '#ffffff';
+  'lp-pri-achromatic-black': '#000000';
+  'lp-pri-gray-cool-980': '#F9F9FA';
+  'lp-pri-gray-cool-970': '#F6F6F7';
+  'lp-pri-gray-cool-950': '#F1F1F2';
+  'lp-pri-gray-cool-940': '#EDEEF0';
+  'lp-pri-gray-cool-920': '#E9E9EB';
+  'lp-pri-gray-cool-900': '#E3E3E6';
+  'lp-pri-gray-cool-850': '#D7D7D9';
+  'lp-pri-gray-cool-350': '#58595C';
+  'lp-pri-gray-cool-300': '#4A4A4D';
+  'lp-pri-gray-cool-270': '#39393B';
+  'lp-pri-gray-cool-250': '#313133';
+  'lp-pri-gray-cool-200': '#272729';
+  'lp-pri-gray-cool-120': '#252526';
+  'lp-pri-gray-cool-100': '#1E1E1F';
+
+  'lp-pri-brand-original-990': '#F6FFF1';
+  'lp-pri-brand-original-980': '#EBFFE7';
+  'lp-pri-brand-original-500': '#0C893B';
+  'lp-pri-brand-original-380': '#006829';
+  'lp-pri-brand-original-200': '#14371B';
+  'lp-pri-brand-original-150': '#14371B';
+  'lp-pri-brand-original-50': '#002109';
+
+  'lp-pri-brand-variation-950': '#C3FFD0';
+  'lp-pri-brand-variation-900': '#96F7B3';
+  'lp-pri-brand-variation-380': '#236638';
+  'lp-pri-brand-variation-350': '#1A5E31';
+  'lp-pri-brand-variation-250': '#00461F';
+  'lp-pri-brand-variation-150': '#0E2B1A';
+  'lp-pri-brand-variation-100': '#032110';
+
+  'lp-pri-rainbow-red-950': '#FFF5F5';
+  'lp-pri-rainbow-red-900': '#FFE7E7';
+  'lp-pri-rainbow-red-800': '#FFC3C3';
+  'lp-pri-rainbow-red-700': '#FF9090';
+  'lp-pri-rainbow-red-600': '#FF6060';
+  'lp-pri-rainbow-red-500': '#FF3333';
+  'lp-pri-rainbow-red-400': '#DB2323';
+  'lp-pri-rainbow-red-300': '#B81616';
+  'lp-pri-rainbow-red-200': '#710808';
+  'lp-pri-rainbow-red-100': '#410404';
+
+  'lp-pri-rainbow-orange-970': '#FFF4EF';
+  'lp-pri-rainbow-orange-940': '#FFEADC';
+  'lp-pri-rainbow-orange-900': '#FFDCC2';
+  'lp-pri-rainbow-orange-800': '#FFB77C';
+  'lp-pri-rainbow-orange-730': '#FF9B3E';
+  'lp-pri-rainbow-orange-700': '#FE8F16';
+  'lp-pri-rainbow-orange-600': '#DA7700';
+  'lp-pri-rainbow-orange-500': '#B46200';
+  'lp-pri-rainbow-orange-400': '#904D00';
+  'lp-pri-rainbow-orange-300': '#6D3900';
+
+  'lp-pri-rainbow-yellow-950': '#FFFDF4';
+  'lp-pri-rainbow-yellow-900': '#FFF9E3';
+  'lp-pri-rainbow-yellow-800': '#FFF0B4';
+  'lp-pri-rainbow-yellow-700': '#FFE375';
+  'lp-pri-rainbow-yellow-600': '#FFD739';
+  'lp-pri-rainbow-yellow-500': '#FFCC00';
+  'lp-pri-rainbow-yellow-400': '#DBB003';
+  'lp-pri-rainbow-yellow-300': '#B89405';
+  'lp-pri-rainbow-yellow-200': '#715B05';
+  'lp-pri-rainbow-yellow-100': '#413503';
+
+  'lp-pri-rainbow-lime_green-970': '#EAFFB6';
+  'lp-pri-rainbow-lime_green-940': '#CEFF56';
+  'lp-pri-rainbow-lime_green-900': '#BFF434';
+  'lp-pri-rainbow-lime_green-800': '#A4D706';
+  'lp-pri-rainbow-lime_green-730': '#94C300';
+  'lp-pri-rainbow-lime_green-700': '#8DBA00';
+  'lp-pri-rainbow-lime_green-600': '#779D00';
+  'lp-pri-rainbow-lime_green-500': '#628200';
+  'lp-pri-rainbow-lime_green-400': '#4D6700';
+  'lp-pri-rainbow-lime_green-300': '#394D00';
+
+  'lp-pri-rainbow-green-950': '#F5FEF7';
+  'lp-pri-rainbow-green-900': '#E6FCEA';
+  'lp-pri-rainbow-green-800': '#BFF5C8';
+  'lp-pri-rainbow-green-700': '#8CEC9C';
+  'lp-pri-rainbow-green-600': '#5DDF73';
+  'lp-pri-rainbow-green-500': '#30BF48';
+  'lp-pri-rainbow-green-400': '#20A536';
+  'lp-pri-rainbow-green-300': '#148B28';
+  'lp-pri-rainbow-green-200': '#075714';
+  'lp-pri-rainbow-green-100': '#03350B';
+
+  'lp-pri-rainbow-mint-950': '#F3FEFE';
+  'lp-pri-rainbow-mint-900': '#AFF7F7';
+  'lp-pri-rainbow-mint-800': '#6EF0F0';
+  'lp-pri-rainbow-mint-700': '#33E6E6';
+  'lp-pri-rainbow-mint-600': '#00CCCC';
+  'lp-pri-rainbow-mint-500': '#02B0B0';
+  'lp-pri-rainbow-mint-400': '#02B0B0';
+  'lp-pri-rainbow-mint-300': '#049494';
+  'lp-pri-rainbow-mint-200': '#045C5C';
+  'lp-pri-rainbow-mint-100': '#033737';
+
+  'lp-pri-rainbow-cyan-950': '#F6FBFF';
+  'lp-pri-rainbow-cyan-900': '#E8F6FF';
+  'lp-pri-rainbow-cyan-800': '#C6E8FF';
+  'lp-pri-rainbow-cyan-700': '#97D5FF';
+  'lp-pri-rainbow-cyan-600': '#6AC4FF';
+  'lp-pri-rainbow-cyan-500': '#40B3FF';
+  'lp-pri-rainbow-cyan-400': '#2B95DB';
+  'lp-pri-rainbow-cyan-300': '#1A79B8';
+  'lp-pri-rainbow-cyan-200': '#094771';
+  'lp-pri-rainbow-cyan-100': '#042941';
+
+  'lp-pri-rainbow-purple-950': '#FCF6FF';
+  'lp-pri-rainbow-purple-900': '#F7EAFE';
+  'lp-pri-rainbow-purple-800': '#EBCAFB';
+  'lp-pri-rainbow-purple-700': '#DAA0F7';
+  'lp-pri-rainbow-purple-600': '#C978F2';
+  'lp-pri-rainbow-purple-500': '#B450E6';
+  'lp-pri-rainbow-purple-400': '#9535C6';
+  'lp-pri-rainbow-purple-300': '#7920A6';
+  'lp-pri-rainbow-purple-200': '#480A67';
+  'lp-pri-rainbow-purple-100': '#29043C';
+
+  'lp-pri-rainbow-pink-950': '#FFF5F8';
+  'lp-pri-rainbow-pink-900': '#FFE7EF';
+  'lp-pri-rainbow-pink-800': '#FFC3D7';
+  'lp-pri-rainbow-pink-700': '#FF90B5';
+  'lp-pri-rainbow-pink-600': '#FF6095';
+  'lp-pri-rainbow-pink-500': '#FF3377';
+  'lp-pri-rainbow-pink-400': '#DB2360';
+  'lp-pri-rainbow-pink-300': '#B8164C';
+  'lp-pri-rainbow-pink-200': '#71082B';
+  'lp-pri-rainbow-pink-100': '#120107';
+}
+
+export type SystemKeys =
+  | 'neutral-container-variation-lowest'
+  | 'neutral-container-lowest-hover'
+  | 'neutral-container-lowest'
+  | 'neutral-container-low'
+  | 'neutral-container-low-hover'
+  | 'neutral-container-mid'
+  | 'neutral-container-mid-hover'
+  | 'neutral-container-high'
+  | 'neutral-container-high-hover'
+  | 'neutral-container-highest'
+  | 'neutral-container-static-lowest'
+  | 'neutral-container-static-lowest-hover'
+  | 'neutral-fill-lowest'
+  | 'neutral-fill-lowest-hover'
+  | 'neutral-fill-low'
+  | 'neutral-fill-low-hover'
+  | 'neutral-fill-mid'
+  | 'neutral-fill-mid-hover'
+  | 'neutral-fill-high'
+  | 'neutral-fill-high-hover'
+  | 'neutral-fill-highest'
+  | 'neutral-label-primary'
+  | 'neutral-label-secondary'
+  | 'neutral-label-tertiary'
+  | 'neutral-label-quaternary'
+  | 'neutral-label-static-primary'
+  | 'neutral-label-static-secondary'
+  | 'neutral-border-overlay-strong'
+  | 'neutral-border-overlay-normal'
+  | 'neutral-border-overlay-subtle'
+  | 'neutral-border-overlay-hint'
+  | 'neutral-border-opaque-strong'
+  | 'neutral-border-opaque-normal'
+  | 'neutral-border-opaque-subtle'
+  | 'inverse-container-lowest'
+  | 'inverse-container-lowest-hover'
+  | 'inverse-container-low'
+  | 'inverse-container-low-hover'
+  | 'inverse-container-mid'
+  | 'inverse-container-mid-hover'
+  | 'inverse-container-high'
+  | 'inverse-container-high-hover'
+  | 'inverse-container-static-high'
+  | 'inverse-container-static-high-hover'
+  | 'inverse-fill-mid'
+  | 'inverse-fill-mid-hover'
+  | 'inverse-label-primary'
+  | 'inverse-label-static-primary'
+  | 'inverse-label-static-secondary'
+  | 'inverse-label-secondary'
+  | 'inverse-label-tertiary'
+  | 'inverse-label-quaternary'
+  | 'inverse-border-overlay-strong'
+  | 'inverse-border-overlay-normal'
+  | 'inverse-border-overlay-subtle'
+  | 'inverse-border-overlay-hint'
+  | 'inverse-border-opaque-strong'
+  | 'inverse-border-opaque-normal'
+  | 'inverse-border-opaque-subtle'
+  | 'brand-container-mid'
+  | 'brand-container-mid-hover'
+  | 'brand-container-high'
+  | 'brand-fill-mid'
+  | 'brand-fill-mid-hover'
+  | 'brand-fill-low'
+  | 'brand-fill-low-hover'
+  | 'brand-label-primary'
+  | 'brand-label-secondary'
+  | 'brand-label-variation-secondary'
+  | 'brand-border-opaque-normal'
+  | 'brand-border-opaque-strong'
+  | 'brandinverse-label-primary'
+  | 'brandinverse-label-secondary'
+  | 'brandinverse-label-static-primary'
+  | 'accent-label-primary'
+  | 'accent-container-primary'
+  | 'function-container-positive'
+  | 'function-container-negative'
+  | 'function-container-negative-hover'
+  | 'function-container-caution'
+  | 'function-container-highlight'
+  | 'function-container-selection'
+  | 'function-container-drag'
+  | 'function-label-positive'
+  | 'function-label-negative'
+  | 'function-label-caution'
+  | 'function-label-link'
+  | 'inverse-container-highest'
+  | 'cover-dim-page';
+
+export interface IPrimitiveWithAlpha extends Partial<Record<AlphasKey, string>>, IPrimitive {}
+
+type ISystem = Record<SystemKeys, keyof IPrimitiveWithAlpha>;
+
+export interface IColor {
+  primitive: IPrimitiveWithAlpha;
+  system: {
+    dark: Partial<ISystem>;
+    light: Partial<ISystem>;
+  };
+}
+
+export type AlphasKey = `${alphaPrimitiveKeys}-alpha-${(typeof alphas)[number]}`;

package/src/constants/gap/index.ts

@@ -0,0 +1,15 @@
+import { ISize } from '../size/type';
+
+export const gap = {
+  'lp-sys-gap-positive-50': ISize['lp-pri-size-2'],
+  'lp-sys-gap-positive-100': ISize['lp-pri-size-4'],
+  'lp-sys-gap-positive-150': ISize['lp-pri-size-6'],
+  'lp-sys-gap-positive-200': ISize['lp-pri-size-8'],
+  'lp-sys-gap-positive-300': ISize['lp-pri-size-12'],
+  'lp-sys-gap-positive-400': ISize['lp-pri-size-16'],
+  'lp-sys-gap-positive-500': ISize['lp-pri-size-20'],
+  'lp-sys-gap-positive-600': ISize['lp-pri-size-24'],
+  'lp-sys-gap-positive-700': ISize['lp-pri-size-32'],
+  'lp-sys-gap-positive-800': ISize['lp-pri-size-40'],
+  'lp-sys-gap-positive-900': ISize['lp-pri-size-48'],
+} as const;

package/src/constants/icon/index.ts

@@ -0,0 +1,9 @@
+import { ISize } from '../size/type';
+
+export const iconSize = {
+  'lp-sys-icon-size-xs': ISize['lp-pri-size-16'],
+  'lp-sys-icon-size-s': ISize['lp-pri-size-20'],
+  'lp-sys-icon-size-m': ISize['lp-pri-size-24'],
+  'lp-sys-icon-size-l': ISize['lp-pri-size-32'],
+  'lp-sys-icon-size-xl': ISize['lp-pri-size-40'],
+} as const;

package/src/constants/letterSpacing/index.ts

@@ -0,0 +1,3 @@
+export const letterSpacing = {
+  'lp-pri-font-letterspacing-tight': -2.5,
+} as const;

package/src/constants/opacity/index.ts

@@ -0,0 +1,21 @@
+export const opacity = {
+  'lp-pri-opacity-80': '80%',
+  'lp-pri-opacity-72': '72%',
+  'lp-pri-opacity-64': '64%',
+  'lp-pri-opacity-56': '56%',
+  'lp-pri-opacity-50': '50%',
+  'lp-pri-opacity-48': '48%',
+  'lp-pri-opacity-44': '44%',
+  'lp-pri-opacity-40': '40%',
+  'lp-pri-opacity-36': '36%',
+  'lp-pri-opacity-32': '32%',
+  'lp-pri-opacity-28': '28%',
+  'lp-pri-opacity-24': '24%',
+  'lp-pri-opacity-20': '20%',
+  'lp-pri-opacity-16': '16%',
+  'lp-pri-opacity-12': '12%',
+  'lp-pri-opacity-8': '8%',
+  'lp-pri-opacity-4': '4%',
+  'lp-pri-opacity-1': '1%',
+  'lp-pri-opacity-0': '0%',
+} as const;

package/src/constants/padding/index.ts

@@ -0,0 +1,26 @@
+import { ISize } from '../size/type';
+
+export const padding = {
+  'lp-sys-padding-component-50': ISize['lp-pri-size-2'],
+  'lp-sys-padding-component-100': ISize['lp-pri-size-4'],
+  'lp-sys-padding-component-150': ISize['lp-pri-size-6'],
+  'lp-sys-padding-component-200': ISize['lp-pri-size-8'],
+  'lp-sys-padding-component-300': ISize['lp-pri-size-12'],
+  'lp-sys-padding-component-400': ISize['lp-pri-size-16'],
+  'lp-sys-padding-component-500': ISize['lp-pri-size-20'],
+  'lp-sys-padding-component-600': ISize['lp-pri-size-24'],
+  'lp-sys-padding-component-700': ISize['lp-pri-size-32'],
+  'lp-sys-padding-component-800': ISize['lp-pri-size-40'],
+  'lp-sys-padding-component-900': ISize['lp-pri-size-48'],
+
+  'lp-sys-padding-section-50': ISize['lp-pri-size-20'],
+  'lp-sys-padding-section-100': ISize['lp-pri-size-24'],
+  'lp-sys-padding-section-200': ISize['lp-pri-size-32'],
+  'lp-sys-padding-section-300': ISize['lp-pri-size-40'],
+  'lp-sys-padding-section-400': ISize['lp-pri-size-48'],
+  'lp-sys-padding-section-500': ISize['lp-pri-size-56'],
+  'lp-sys-padding-section-600': ISize['lp-pri-size-64'],
+  'lp-sys-padding-section-700': ISize['lp-pri-size-80'],
+  'lp-sys-padding-section-800': ISize['lp-pri-size-100'],
+  'lp-sys-padding-section-900': ISize['lp-pri-size-120'],
+} as const;

package/src/constants/radius/index.ts

@@ -0,0 +1,12 @@
+import { ISize } from '../size/type';
+import { IRadius } from './type';
+
+export const radius: IRadius = {
+  'lp-sys-radius-xxs': ISize['lp-pri-size-2'],
+  'lp-sys-radius-xs': ISize['lp-pri-size-4'],
+  'lp-sys-radius-s': ISize['lp-pri-size-6'],
+  'lp-sys-radius-m': ISize['lp-pri-size-8'],
+  'lp-sys-radius-l': ISize['lp-pri-size-10'],
+  'lp-sys-radius-xl': ISize['lp-pri-size-12'],
+  'lp-sys-radius-xxl': ISize['lp-pri-size-200'],
+} as const;

package/src/constants/radius/type.ts

@@ -0,0 +1,11 @@
+import { ISize } from '../size/type';
+
+export interface IRadius {
+  'lp-sys-radius-xxs': (typeof ISize)['lp-pri-size-2'];
+  'lp-sys-radius-xs': (typeof ISize)['lp-pri-size-4'];
+  'lp-sys-radius-s': (typeof ISize)['lp-pri-size-6'];
+  'lp-sys-radius-m': (typeof ISize)['lp-pri-size-8'];
+  'lp-sys-radius-l': (typeof ISize)['lp-pri-size-10'];
+  'lp-sys-radius-xl': (typeof ISize)['lp-pri-size-12'];
+  'lp-sys-radius-xxl': (typeof ISize)['lp-pri-size-200'];
+}

package/src/constants/shadow/index.ts

@@ -0,0 +1,20 @@
+export const SHADOW_KEYS = [
+  'lp-sys-shadow-normal',
+  'lp-sys-shadow-strong',
+  'lp-sys-shadow-heavy',
+] as const;
+
+export const shadow: Record<(typeof SHADOW_KEYS)[number], [string, string]> = {
+  'lp-sys-shadow-normal': [
+    '0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)',
+    '0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)',
+  ],
+  'lp-sys-shadow-strong': [
+    '0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)',
+    '0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)',
+  ],
+  'lp-sys-shadow-heavy': [
+    '0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)',
+    '0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)',
+  ],
+};

package/src/constants/size/index.ts

@@ -0,0 +1,33 @@
+import { ISize } from './type';
+
+export const size: Record<keyof typeof ISize, (typeof ISize)[keyof typeof ISize]> = {
+  ['lp-pri-size-minus6']: ISize['lp-pri-size-minus6'],
+  ['lp-pri-size-minus4']: ISize['lp-pri-size-minus4'],
+  ['lp-pri-size-minus2']: ISize['lp-pri-size-minus2'],
+  ['lp-pri-size-0']: ISize['lp-pri-size-0'],
+  ['lp-pri-size-1']: ISize['lp-pri-size-1'],
+  ['lp-pri-size-2']: ISize['lp-pri-size-2'],
+  ['lp-pri-size-3']: ISize['lp-pri-size-3'],
+  ['lp-pri-size-4']: ISize['lp-pri-size-4'],
+  ['lp-pri-size-6']: ISize['lp-pri-size-6'],
+  ['lp-pri-size-8']: ISize['lp-pri-size-8'],
+  ['lp-pri-size-10']: ISize['lp-pri-size-10'],
+  ['lp-pri-size-12']: ISize['lp-pri-size-12'],
+  ['lp-pri-size-14']: ISize['lp-pri-size-14'],
+  ['lp-pri-size-16']: ISize['lp-pri-size-16'],
+  ['lp-pri-size-18']: ISize['lp-pri-size-18'],
+  ['lp-pri-size-20']: ISize['lp-pri-size-20'],
+  ['lp-pri-size-24']: ISize['lp-pri-size-24'],
+  ['lp-pri-size-32']: ISize['lp-pri-size-32'],
+  ['lp-pri-size-40']: ISize['lp-pri-size-40'],
+  ['lp-pri-size-48']: ISize['lp-pri-size-48'],
+  ['lp-pri-size-56']: ISize['lp-pri-size-56'],
+  ['lp-pri-size-64']: ISize['lp-pri-size-64'],
+  ['lp-pri-size-80']: ISize['lp-pri-size-80'],
+  ['lp-pri-size-100']: ISize['lp-pri-size-100'],
+  ['lp-pri-size-120']: ISize['lp-pri-size-120'],
+  ['lp-pri-size-140']: ISize['lp-pri-size-140'],
+  ['lp-pri-size-160']: ISize['lp-pri-size-160'],
+  ['lp-pri-size-180']: ISize['lp-pri-size-180'],
+  ['lp-pri-size-200']: ISize['lp-pri-size-200'],
+};

package/src/constants/size/type.ts

@@ -0,0 +1,31 @@
+export const ISize = {
+  'lp-pri-size-minus6': '-6px',
+  'lp-pri-size-minus4': '-4px',
+  'lp-pri-size-minus2': '-2px',
+  'lp-pri-size-0': '0px',
+  'lp-pri-size-1': '1px',
+  'lp-pri-size-2': '2px',
+  'lp-pri-size-3': '3px',
+  'lp-pri-size-4': '4px',
+  'lp-pri-size-6': '6px',
+  'lp-pri-size-8': '8px',
+  'lp-pri-size-10': '10px',
+  'lp-pri-size-12': '12px',
+  'lp-pri-size-14': '14px',
+  'lp-pri-size-16': '16px',
+  'lp-pri-size-18': '18px',
+  'lp-pri-size-20': '20px',
+  'lp-pri-size-24': '24px',
+  'lp-pri-size-32': '32px',
+  'lp-pri-size-40': '40px',
+  'lp-pri-size-48': '48px',
+  'lp-pri-size-56': '56px',
+  'lp-pri-size-64': '64px',
+  'lp-pri-size-80': '80px',
+  'lp-pri-size-100': '100px',
+  'lp-pri-size-120': '120px',
+  'lp-pri-size-140': '140px',
+  'lp-pri-size-160': '160px',
+  'lp-pri-size-180': '180px',
+  'lp-pri-size-200': '200px',
+} as const;