onecart-ui-tokens 0.1.0

package/src/styles/tokens/tokensMap.scss

@@ -0,0 +1,353 @@
+
+/**
+ * File generated by the Figma Token Engine
+ * Do not edit directly
+ */
+
+$tokens: (
+  'border-radius-tooltip-default': 0.25rem,
+  'border-radius-popover-default': 0.5rem,
+  'border-radius-tag-sm': 0.25rem,
+  'border-radius-tag-xl': 62.4rem,
+  'border-radius-button-sm': 0.25rem,
+  'border-radius-button-full': 62.4rem,
+  'border-radius-input-sm': 0.25rem,
+  'border-radius-input-lg': 0.5rem,
+  'border-radius-card-sm': 0.25rem,
+  'border-radius-card-md': 0.5rem,
+  'border-radius-card-lg': 0.75rem,
+  'border-radius-modal-lg': 0.75rem,
+  'border-radius-modal-xl': 1rem,
+  'border-radius-none': 0,
+  'border-radius-xs': 0.25rem,
+  'border-radius-sm': 0.5rem,
+  'border-radius-md': 0.75rem,
+  'border-radius-lg': 1rem,
+  'border-radius-xl': 1.25rem,
+  'border-radius-2xl': 1.5rem,
+  'border-radius-3xl': 1.75rem,
+  'border-radius-full': 62.4rem,
+  'border-width-button-default': 0.0625rem,
+  'border-width-button-hover': 0.125rem,
+  'border-width-button-pressed': 0.125rem,
+  'border-width-input-default': 0.0625rem,
+  'border-width-input-focus': 0.125rem,
+  'border-width-input-error': 0.125rem,
+  'border-width-card-default': 0.0625rem,
+  'border-width-card-hover': 0.125rem,
+  'border-width-none': 0,
+  'border-width-xs': 0.0625rem,
+  'border-width-sm': 0.125rem,
+  'border-width-md': 0.25rem,
+  'border-green': #00df88,
+  'border-blue': #0053e2,
+  'border-yellow': #f4b400,
+  'border-red': #a90000,
+  'border-dark': #111,
+  'border-light': #e2e2e2,
+  'border-lighter': #f1f1f1,
+  'layout-spacing-inline-none': 0,
+  'layout-spacing-inline-3xs': 0.125rem,
+  'layout-spacing-inline-2xs': 0.25rem,
+  'layout-spacing-inline-xs': 0.5rem,
+  'layout-spacing-inline-sm': 0.75rem,
+  'layout-spacing-inline-md': 1rem,
+  'layout-spacing-inline-lg': 2rem,
+  'layout-spacing-inline-xl': 2.5rem,
+  'layout-spacing-inline-2xl': 5rem,
+  'layout-spacing-stack-none': 0,
+  'layout-spacing-stack-3xs': 0.125rem,
+  'layout-spacing-stack-2xs': 0.25rem,
+  'layout-spacing-stack-xs': 0.5rem,
+  'layout-spacing-stack-sm': 0.75rem,
+  'layout-spacing-stack-md': 1rem,
+  'layout-spacing-stack-lg': 2rem,
+  'layout-spacing-stack-xl': 2.5rem,
+  'layout-spacing-stack-2xl': 5rem,
+  'section-spacing-sm': 1.5rem,
+  'section-spacing-md': 1.75rem,
+  'section-spacing-lg': 2rem,
+  'section-spacing-xl': 2.5rem,
+  'section-spacing-2xl': 3.5rem,
+  'section-spacing-3xl': 5rem,
+  'component-card-sm': 0.75rem,
+  'component-card-md': 1.25rem,
+  'component-card-lg': 1.5rem,
+  'component-card-xl': 2rem,
+  'component-card-2xl': 2.5rem,
+  'component-modal-sm': 1.25rem,
+  'component-modal-md': 1.5rem,
+  'component-modal-lg': 1.75rem,
+  'space-0': 0,
+  'space-3xs': 0.125rem,
+  'space-2xs': 0.25rem,
+  'space-xs': 0.5rem,
+  'space-sm': 0.75rem,
+  'space-md': 1rem,
+  'space-lg': 1.25rem,
+  'space-xl': 1.5rem,
+  'space-2xl': 1.75rem,
+  'space-3xl': 2rem,
+  'space-4xl': 2.5rem,
+  'space-5xl': 3rem,
+  'space-6xl': 3.5rem,
+  'space-7xl': 4rem,
+  'space-8xl': 5rem,
+  'xs': 0.75rem,
+  's': 1rem,
+  'md': 1.25rem,
+  'lg': 1.5rem,
+  'xl': 1.75rem,
+  '2xl': 2rem,
+  'background-yellow-light': #fff5d9,
+  'background-yellow-medium': #ffe7a5,
+  'background-blue-light': #e3ebff,
+  'background-blue-medium': #c3deff,
+  'background-green-light': #E5FCF3,
+  'background-green-medium': #ccf9e7,
+  'background-green-dark': #00df88,
+  'background-red-light': #feecec,
+  'background-red-medium': #fed8d8,
+  'background-white-light': #ffffff,
+  'background-neutral-dark': #111,
+  'background-neutral-grey': #e2e2e2,
+  'background-neutral-light': #f1f1f1,
+  'text-inverse': #ffffff,
+  'text-disabled': #ababab,
+  'text-placeholder': #919191,
+  'text-tertiary': #525252,
+  'text-body': #3b3b3b,
+  'text-header': #111,
+  'text-green': #00df88,
+  'text-blue': #0053e2,
+  'text-error': #a90000,
+  'text-yellow': #f4b400,
+  'feedback-alert-success': #00df88,
+  'feedback-alert-error': #a90000,
+  'feedback-alert-warning': #fff5d9,
+  'feedback-alert-neutral': #111,
+  'action-primary-default': #00df88,
+  'action-primary-hover': #4ce9ac,
+  'action-primary-active': #98f2cf,
+  'action-primary-disabled': #E5FCF3,
+  'action-secondary-default': #0053e2,
+  'action-secondary-hover': #254cac,
+  'action-secondary-active': #9ec1ff,
+  'action-secondary-disabled': #e3ebff,
+  'action-destructive-default': #d60000,
+  'action-destructive-hover': #a90000,
+  'action-destructive-active': #fed8d8,
+  'action-destructive-disable': #feecec,
+  'action-tertiary-default': #3b3b3b,
+  'action-tertiary-hover': #111,
+  'action-tertiary-active': #ababab,
+  'action-tertiary-disable': #f1f1f1,
+  'icon-yellow': #f4b400,
+  'icon-blue': #0053e2,
+  'icon-green': #00df88,
+  'icon-red': #a90000,
+  'icon-neutral': #111,
+  'icon-light': #e2e2e2,
+  'icon-lighter': #f1f1f1,
+  'green-10': #E5FCF3,
+  'green-20': #ccf9e7,
+  'green-30': #B2F5DB,
+  'green-40': #98f2cf,
+  'green-50': #81efc3,
+  'green-60': #66ecb8,
+  'green-70': #4ce9ac,
+  'green-80': #31e5a0,
+  'green-90': #1ae294,
+  'green-100': #00df88,
+  'neutral-10': #f1f1f1,
+  'neutral-20': #e2e2e2,
+  'neutral-30': #c6c6c6,
+  'neutral-40': #ababab,
+  'neutral-50': #919191,
+  'neutral-60': #6a6a6a,
+  'neutral-70': #525252,
+  'neutral-80': #3b3b3b,
+  'neutral-90': #262626,
+  'neutral-100': #111,
+  'blue-10': #e3ebff,
+  'blue-20': #c3deff,
+  'blue-30': #9ec1ff,
+  'blue-40': #5c83fd,
+  'blue-50': #446ef5,
+  'blue-60': #0053e2,
+  'blue-70': #254cac,
+  'blue-80': #14328d,
+  'blue-90': #0c285f,
+  'blue-100': #071e3c,
+  'red-10': #feecec,
+  'red-20': #fed8d8,
+  'red-30': #feb3b3,
+  'red-40': #fe8888,
+  'red-50': #fb5959,
+  'red-60': #d60000,
+  'red-70': #a90000,
+  'red-80': #820000,
+  'red-90': #550000,
+  'red-100': #3a0000,
+  'yellow-10': #fff5d9,
+  'yellow-20': #ffe7a5,
+  'yellow-30': #ffd86b,
+  'yellow-40': #ffce46,
+  'yellow-50': #ffc420,
+  'yellow-60': #f4b400,
+  'yellow-70': #dba200,
+  'yellow-80': #c69200,
+  'yellow-90': #b38400,
+  'yellow-100': #9a7100,
+  'white-10': #ffffff,
+  'display-2xl-font-family': 'Campton',
+  'display-2xl-font-weight': 500,
+  'display-2xl-line-height': 56px,
+  'display-2xl-font-size': 52px,
+  'display-2xl-letter-spacing': 0%,
+  'display-2xl-paragraph-indent': 0px,
+  'display-2xl-text-case': none,
+  'display-2xl-text-decoration': none,
+  'display-xl-font-family': 'Campton',
+  'display-xl-font-weight': 500,
+  'display-xl-line-height': 48px,
+  'display-xl-font-size': 44px,
+  'display-xl-letter-spacing': 0%,
+  'display-xl-paragraph-indent': 0px,
+  'display-xl-text-case': none,
+  'display-xl-text-decoration': none,
+  'heading-xl-font-family': 'Campton',
+  'heading-xl-font-weight': 600,
+  'heading-xl-line-height': 48px,
+  'heading-xl-font-size': 40px,
+  'heading-xl-letter-spacing': 0%,
+  'heading-xl-paragraph-indent': 0px,
+  'heading-xl-text-case': none,
+  'heading-xl-text-decoration': none,
+  'heading-lg-font-family': 'Campton',
+  'heading-lg-font-weight': 600,
+  'heading-lg-line-height': 44px,
+  'heading-lg-font-size': 36px,
+  'heading-lg-letter-spacing': 0%,
+  'heading-lg-paragraph-indent': 0px,
+  'heading-lg-text-case': none,
+  'heading-lg-text-decoration': none,
+  'heading-md-font-family': 'Campton',
+  'heading-md-font-weight': 600,
+  'heading-md-line-height': 40px,
+  'heading-md-font-size': 32px,
+  'heading-md-letter-spacing': 0%,
+  'heading-md-paragraph-indent': 0px,
+  'heading-md-text-case': none,
+  'heading-md-text-decoration': none,
+  'heading-sm-font-family': 'Campton',
+  'heading-sm-font-weight': 600,
+  'heading-sm-line-height': 36px,
+  'heading-sm-font-size': 28px,
+  'heading-sm-letter-spacing': 0%,
+  'heading-sm-paragraph-indent': 0px,
+  'heading-sm-text-case': none,
+  'heading-sm-text-decoration': none,
+  'heading-xs-font-family': 'Campton',
+  'heading-xs-font-weight': 600,
+  'heading-xs-line-height': 28px,
+  'heading-xs-font-size': 20px,
+  'heading-xs-letter-spacing': 0%,
+  'heading-xs-paragraph-indent': 0px,
+  'heading-xs-text-case': none,
+  'heading-xs-text-decoration': none,
+  'heading-2xs-font-family': 'Campton',
+  'heading-2xs-font-weight': 600,
+  'heading-2xs-line-height': 24px,
+  'heading-2xs-font-size': 18px,
+  'heading-2xs-letter-spacing': 0%,
+  'heading-2xs-paragraph-indent': 0px,
+  'heading-2xs-text-case': none,
+  'heading-2xs-text-decoration': none,
+  'body-xl-font-family': 'Campton',
+  'body-xl-font-weight': book,
+  'body-xl-line-height': 28px,
+  'body-xl-font-size': 18px,
+  'body-xl-letter-spacing': 0%,
+  'body-xl-paragraph-indent': 0px,
+  'body-xl-text-case': none,
+  'body-xl-text-decoration': none,
+  'body-lg-font-family': 'Campton',
+  'body-lg-font-weight': book,
+  'body-lg-line-height': 24px,
+  'body-lg-font-size': 16px,
+  'body-lg-letter-spacing': 0%,
+  'body-lg-paragraph-indent': 0px,
+  'body-lg-text-case': none,
+  'body-lg-text-decoration': none,
+  'body-md-font-family': 'Campton',
+  'body-md-font-weight': book,
+  'body-md-line-height': 20px,
+  'body-md-font-size': 14px,
+  'body-md-letter-spacing': 0%,
+  'body-md-paragraph-indent': 0px,
+  'body-md-text-case': none,
+  'body-md-text-decoration': none,
+  'body-sm-font-family': 'Campton',
+  'body-sm-font-weight': book,
+  'body-sm-line-height': 20px,
+  'body-sm-font-size': 12px,
+  'body-sm-letter-spacing': 0%,
+  'body-sm-paragraph-indent': 0px,
+  'body-sm-text-case': none,
+  'body-sm-text-decoration': none,
+  'utility-button-font-family': 'Campton',
+  'utility-button-font-weight': 500,
+  'utility-button-line-height': 16px,
+  'utility-button-font-size': 16px,
+  'utility-button-letter-spacing': 0%,
+  'utility-button-paragraph-indent': 0px,
+  'utility-button-text-case': none,
+  'utility-button-text-decoration': none,
+  'utility-link-font-family': 'Campton',
+  'utility-link-font-weight': 500,
+  'utility-link-line-height': 20px,
+  'utility-link-font-size': 14px,
+  'utility-link-letter-spacing': 0%,
+  'utility-link-paragraph-indent': 0px,
+  'utility-link-text-case': none,
+  'utility-link-text-decoration': underline,
+  'utility-caption-font-family': 'Campton',
+  'utility-caption-font-weight': book,
+  'utility-caption-line-height': 16px,
+  'utility-caption-font-size': 12px,
+  'utility-caption-letter-spacing': 0%,
+  'utility-caption-paragraph-indent': 0px,
+  'utility-caption-text-case': none,
+  'utility-caption-text-decoration': none,
+  'font-families-campton': 'Campton',
+  'line-height-6xl': 56px,
+  'line-height-5xl': 48px,
+  'line-height-4xl': 44px,
+  'line-height-3xl': 40px,
+  'line-height-2xl': 36px,
+  'line-height-xl': 32px,
+  'line-height-lg': 28px,
+  'line-height-md': 24px,
+  'line-height-s': 20px,
+  'line-height-xs': 16px,
+  'medium': 500,
+  'semi-bold': 600,
+  'book': book,
+  'font-size-2xs': 14px,
+  'font-size-3xs': 12px,
+  'font-size-xs': 16px,
+  'font-size-md': 18px,
+  'font-size-lg': 20px,
+  'font-size-xl': 28px,
+  'font-size-2xl': 32px,
+  'font-size-3xl': 36px,
+  'font-size-4xl': 40px,
+  'font-size-5xl': 44px,
+  'font-size-6xl': 52px,
+  'letter-spacing-0': 0%,
+  'text-case-none': none,
+  'text-decoration-none': none,
+  'text-decoration-underline': underline,
+  'paragraph-indent-0': 0px
+);

package/src/styles/tokens/utils/fontUtils.ts

@@ -0,0 +1,63 @@
+import { pxToNumber } from "./utils";
+
+/**
+ * Normalizes font weight to a string representation
+ * Converts numeric values to string, handles special cases like "book"
+ * @param weight The font weight value, can be a string or number
+ * @returns Normalized font weight as a string
+ */
+export const normalizeFontWeight = (weight: string | number): string => {
+  if (typeof weight === "number") {
+    return weight.toString();
+  }
+
+  if (weight === "book") {
+    return "400";
+  }
+
+  return weight;
+};
+
+/**
+ * Calculates an appropriate line height based on font size
+ * Uses a standard typographic ratio or falls back to a default multiplier
+ *
+ * @param fontSize The font size in pixels
+ * @param ratio Optional ratio to calculate line height (default: 1.5)
+ * @returns The calculated line height as a number
+ */
+export const calculateLineHeight = (
+  fontSize: string | number,
+  ratio: number = 1.5
+): number => {
+  const size = typeof fontSize === "string" ? pxToNumber(fontSize) : fontSize;
+  return Math.round(size * ratio);
+};
+
+/**
+ * Converts letter spacing percentage to a pixel value
+ * Figma often uses percentage values for letter spacing
+ *
+ * @param letterSpacing The letter spacing value (e.g. "0%", "2%")
+ * @param fontSize The font size to calculate relative to
+ * @returns The letter spacing in pixels as a number
+ */
+export const letterSpacingToPixels = (
+  letterSpacing: string,
+  fontSize: string | number
+): number => {
+  // If letterSpacing is already a pixel value, convert and return
+  if (letterSpacing.endsWith("px")) {
+    return pxToNumber(letterSpacing);
+  }
+
+  // Handle percentage values
+  if (letterSpacing.endsWith("%")) {
+    const percentage = parseFloat(letterSpacing) / 100;
+    const size = typeof fontSize === "string" ? pxToNumber(fontSize) : fontSize;
+    return size * percentage;
+  }
+
+  // Default to 0 if format is not recognized
+  return 0;
+};

package/src/styles/tokens/utils/utils.ts

@@ -0,0 +1,19 @@
+/**
+ * Convert rem values to numbers
+ * @param remValue The rem value to convert (e.g. "1.5rem")
+ * @returns The converted number value
+ */
+export const remToNumber = (remValue: string): number => {
+  if (!remValue || typeof remValue !== 'string') return 0;
+  return parseFloat(remValue.replace('rem', '')) * 16; // Assuming 1rem = 16px
+};
+
+/**
+ * Convert px values to numbers
+ * @param pxValue The px value to convert (e.g. "24px")
+ * @returns The converted number value
+ */
+export const pxToNumber = (pxValue: string): number => {
+  if (!pxValue || typeof pxValue !== 'string') return 0;
+  return parseFloat(pxValue.replace('px', ''));
+};

package/style-dictionary.config.js

@@ -0,0 +1,41 @@
+/* Style Dictionary configuration for OneCart UI tokens */
+module.exports = {
+  // Include authored JSON tokens and any synced Tokens Studio output (relative paths from package root)
+  source: ["src/**/*.json", "src/styles/tokens/**/*.json"],
+  transform: {
+    // custom transforms could be registered here if needed
+  },
+  platforms: {
+    webCss: {
+      transformGroup: "web",
+      buildPath: "build/web/",
+      files: [
+        {
+          destination: "tokens.css",
+          format: "css/variables",
+          options: { prefix: "oc" },
+        },
+      ],
+    },
+    webJs: {
+      transformGroup: "js",
+      buildPath: "build/web/",
+      files: [
+        {
+          destination: "tokens.js",
+          format: "javascript/es6",
+        },
+      ],
+    },
+    mobile: {
+      transformGroup: "js",
+      buildPath: "build/mobile/",
+      files: [
+        {
+          destination: "tokens.js",
+          format: "javascript/es6",
+        },
+      ],
+    },
+  },
+};