@ripperdoc-chrome77/tokens 1.0.0-beta

package/dist/index.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  motion: () => motion,
+  radii: () => radii,
+  spacing: () => spacing,
+  typography: () => typography
+});
+module.exports = __toCommonJS(index_exports);
+var spacing = {
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px"
+};
+var radii = {
+  sm: "4px",
+  default: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  full: "9999px"
+};
+var motion = {
+  fast: "150ms",
+  normal: "250ms",
+  slow: "400ms",
+  easeStandard: "cubic-bezier(0.4, 0, 0.2, 1)",
+  easeDecelerate: "cubic-bezier(0, 0, 0.2, 1)",
+  easeAccelerate: "cubic-bezier(0.4, 0, 1, 1)"
+};
+var typography = {
+  displayHero: { size: "48px", lineHeight: "56px", weight: "700", letterSpacing: "-0.03em" },
+  headlineXl: { size: "40px", lineHeight: "48px", weight: "700", letterSpacing: "-0.025em" },
+  headlineLg: { size: "28px", lineHeight: "36px", weight: "700", letterSpacing: "-0.02em" },
+  headlineMd: { size: "22px", lineHeight: "28px", weight: "600", letterSpacing: "-0.015em" },
+  headlineSm: { size: "18px", lineHeight: "24px", weight: "600", letterSpacing: "-0.01em" },
+  titleMd: { size: "16px", lineHeight: "22px", weight: "600", letterSpacing: "-0.005em" },
+  bodyLg: { size: "18px", lineHeight: "28px", weight: "400", letterSpacing: "0" },
+  bodyMd: { size: "16px", lineHeight: "24px", weight: "400", letterSpacing: "0" },
+  bodySm: { size: "14px", lineHeight: "20px", weight: "400", letterSpacing: "0" },
+  labelLg: { size: "14px", lineHeight: "18px", weight: "600", letterSpacing: "0.01em" },
+  labelMd: { size: "12px", lineHeight: "16px", weight: "600", letterSpacing: "0.02em" },
+  labelSm: { size: "11px", lineHeight: "14px", weight: "700", letterSpacing: "0.06em" }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  motion,
+  radii,
+  spacing,
+  typography
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export const spacing = {\n  1: '4px',\n  2: '8px',\n  3: '12px',\n  4: '16px',\n  5: '20px',\n  6: '24px',\n  8: '32px',\n  10: '40px',\n  12: '48px',\n  16: '64px',\n} as const;\n\nexport type SpacingScale = keyof typeof spacing;\n\nexport const radii = {\n  sm: '4px',\n  default: '8px',\n  md: '12px',\n  lg: '16px',\n  xl: '24px',\n  full: '9999px',\n} as const;\n\nexport type RadiiScale = keyof typeof radii;\n\nexport const motion = {\n  fast: '150ms',\n  normal: '250ms',\n  slow: '400ms',\n  easeStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n  easeDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n  easeAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const;\n\nexport const typography = {\n  displayHero: { size: '48px', lineHeight: '56px', weight: '700', letterSpacing: '-0.03em' },\n  headlineXl: { size: '40px', lineHeight: '48px', weight: '700', letterSpacing: '-0.025em' },\n  headlineLg: { size: '28px', lineHeight: '36px', weight: '700', letterSpacing: '-0.02em' },\n  headlineMd: { size: '22px', lineHeight: '28px', weight: '600', letterSpacing: '-0.015em' },\n  headlineSm: { size: '18px', lineHeight: '24px', weight: '600', letterSpacing: '-0.01em' },\n  titleMd: { size: '16px', lineHeight: '22px', weight: '600', letterSpacing: '-0.005em' },\n  bodyLg: { size: '18px', lineHeight: '28px', weight: '400', letterSpacing: '0' },\n  bodyMd: { size: '16px', lineHeight: '24px', weight: '400', letterSpacing: '0' },\n  bodySm: { size: '14px', lineHeight: '20px', weight: '400', letterSpacing: '0' },\n  labelLg: { size: '14px', lineHeight: '18px', weight: '600', letterSpacing: '0.01em' },\n  labelMd: { size: '12px', lineHeight: '16px', weight: '600', letterSpacing: '0.02em' },\n  labelSm: { size: '11px', lineHeight: '14px', weight: '700', letterSpacing: '0.06em' },\n} as const;\n\nexport type TypographyRole = keyof typeof typography;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAIO,IAAM,QAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAIO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;AAEO,IAAM,aAAa;AAAA,EACxB,aAAa,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACxF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACxF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACtF,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AAAA,EACpF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AAAA,EACpF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AACtF;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,105 @@
+export declare const spacing: {
+    readonly 1: '4px';
+    readonly 2: '8px';
+    readonly 3: '12px';
+    readonly 4: '16px';
+    readonly 5: '20px';
+    readonly 6: '24px';
+    readonly 8: '32px';
+    readonly 10: '40px';
+    readonly 12: '48px';
+    readonly 16: '64px';
+};
+export type SpacingScale = keyof typeof spacing;
+export declare const radii: {
+    readonly sm: '4px';
+    readonly default: '8px';
+    readonly md: '12px';
+    readonly lg: '16px';
+    readonly xl: '24px';
+    readonly full: '9999px';
+};
+export type RadiiScale = keyof typeof radii;
+export declare const motion: {
+    readonly fast: '150ms';
+    readonly normal: '250ms';
+    readonly slow: '400ms';
+    readonly easeStandard: 'cubic-bezier(0.4, 0, 0.2, 1)';
+    readonly easeDecelerate: 'cubic-bezier(0, 0, 0.2, 1)';
+    readonly easeAccelerate: 'cubic-bezier(0.4, 0, 1, 1)';
+};
+export declare const typography: {
+    readonly displayHero: {
+        readonly size: '48px';
+        readonly lineHeight: '56px';
+        readonly weight: '700';
+        readonly letterSpacing: '-0.03em';
+    };
+    readonly headlineXl: {
+        readonly size: '40px';
+        readonly lineHeight: '48px';
+        readonly weight: '700';
+        readonly letterSpacing: '-0.025em';
+    };
+    readonly headlineLg: {
+        readonly size: '28px';
+        readonly lineHeight: '36px';
+        readonly weight: '700';
+        readonly letterSpacing: '-0.02em';
+    };
+    readonly headlineMd: {
+        readonly size: '22px';
+        readonly lineHeight: '28px';
+        readonly weight: '600';
+        readonly letterSpacing: '-0.015em';
+    };
+    readonly headlineSm: {
+        readonly size: '18px';
+        readonly lineHeight: '24px';
+        readonly weight: '600';
+        readonly letterSpacing: '-0.01em';
+    };
+    readonly titleMd: {
+        readonly size: '16px';
+        readonly lineHeight: '22px';
+        readonly weight: '600';
+        readonly letterSpacing: '-0.005em';
+    };
+    readonly bodyLg: {
+        readonly size: '18px';
+        readonly lineHeight: '28px';
+        readonly weight: '400';
+        readonly letterSpacing: '0';
+    };
+    readonly bodyMd: {
+        readonly size: '16px';
+        readonly lineHeight: '24px';
+        readonly weight: '400';
+        readonly letterSpacing: '0';
+    };
+    readonly bodySm: {
+        readonly size: '14px';
+        readonly lineHeight: '20px';
+        readonly weight: '400';
+        readonly letterSpacing: '0';
+    };
+    readonly labelLg: {
+        readonly size: '14px';
+        readonly lineHeight: '18px';
+        readonly weight: '600';
+        readonly letterSpacing: '0.01em';
+    };
+    readonly labelMd: {
+        readonly size: '12px';
+        readonly lineHeight: '16px';
+        readonly weight: '600';
+        readonly letterSpacing: '0.02em';
+    };
+    readonly labelSm: {
+        readonly size: '11px';
+        readonly lineHeight: '14px';
+        readonly weight: '700';
+        readonly letterSpacing: '0.06em';
+    };
+};
+export type TypographyRole = keyof typeof typography;

package/dist/index.js

@@ -0,0 +1,50 @@
+// src/index.ts
+var spacing = {
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px"
+};
+var radii = {
+  sm: "4px",
+  default: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  full: "9999px"
+};
+var motion = {
+  fast: "150ms",
+  normal: "250ms",
+  slow: "400ms",
+  easeStandard: "cubic-bezier(0.4, 0, 0.2, 1)",
+  easeDecelerate: "cubic-bezier(0, 0, 0.2, 1)",
+  easeAccelerate: "cubic-bezier(0.4, 0, 1, 1)"
+};
+var typography = {
+  displayHero: { size: "48px", lineHeight: "56px", weight: "700", letterSpacing: "-0.03em" },
+  headlineXl: { size: "40px", lineHeight: "48px", weight: "700", letterSpacing: "-0.025em" },
+  headlineLg: { size: "28px", lineHeight: "36px", weight: "700", letterSpacing: "-0.02em" },
+  headlineMd: { size: "22px", lineHeight: "28px", weight: "600", letterSpacing: "-0.015em" },
+  headlineSm: { size: "18px", lineHeight: "24px", weight: "600", letterSpacing: "-0.01em" },
+  titleMd: { size: "16px", lineHeight: "22px", weight: "600", letterSpacing: "-0.005em" },
+  bodyLg: { size: "18px", lineHeight: "28px", weight: "400", letterSpacing: "0" },
+  bodyMd: { size: "16px", lineHeight: "24px", weight: "400", letterSpacing: "0" },
+  bodySm: { size: "14px", lineHeight: "20px", weight: "400", letterSpacing: "0" },
+  labelLg: { size: "14px", lineHeight: "18px", weight: "600", letterSpacing: "0.01em" },
+  labelMd: { size: "12px", lineHeight: "16px", weight: "600", letterSpacing: "0.02em" },
+  labelSm: { size: "11px", lineHeight: "14px", weight: "700", letterSpacing: "0.06em" }
+};
+export {
+  motion,
+  radii,
+  spacing,
+  typography
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export const spacing = {\n  1: '4px',\n  2: '8px',\n  3: '12px',\n  4: '16px',\n  5: '20px',\n  6: '24px',\n  8: '32px',\n  10: '40px',\n  12: '48px',\n  16: '64px',\n} as const;\n\nexport type SpacingScale = keyof typeof spacing;\n\nexport const radii = {\n  sm: '4px',\n  default: '8px',\n  md: '12px',\n  lg: '16px',\n  xl: '24px',\n  full: '9999px',\n} as const;\n\nexport type RadiiScale = keyof typeof radii;\n\nexport const motion = {\n  fast: '150ms',\n  normal: '250ms',\n  slow: '400ms',\n  easeStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n  easeDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n  easeAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const;\n\nexport const typography = {\n  displayHero: { size: '48px', lineHeight: '56px', weight: '700', letterSpacing: '-0.03em' },\n  headlineXl: { size: '40px', lineHeight: '48px', weight: '700', letterSpacing: '-0.025em' },\n  headlineLg: { size: '28px', lineHeight: '36px', weight: '700', letterSpacing: '-0.02em' },\n  headlineMd: { size: '22px', lineHeight: '28px', weight: '600', letterSpacing: '-0.015em' },\n  headlineSm: { size: '18px', lineHeight: '24px', weight: '600', letterSpacing: '-0.01em' },\n  titleMd: { size: '16px', lineHeight: '22px', weight: '600', letterSpacing: '-0.005em' },\n  bodyLg: { size: '18px', lineHeight: '28px', weight: '400', letterSpacing: '0' },\n  bodyMd: { size: '16px', lineHeight: '24px', weight: '400', letterSpacing: '0' },\n  bodySm: { size: '14px', lineHeight: '20px', weight: '400', letterSpacing: '0' },\n  labelLg: { size: '14px', lineHeight: '18px', weight: '600', letterSpacing: '0.01em' },\n  labelMd: { size: '12px', lineHeight: '16px', weight: '600', letterSpacing: '0.02em' },\n  labelSm: { size: '11px', lineHeight: '14px', weight: '700', letterSpacing: '0.06em' },\n} as const;\n\nexport type TypographyRole = keyof typeof typography;\n"],"mappings":";AAAO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAIO,IAAM,QAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAIO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;AAEO,IAAM,aAAa;AAAA,EACxB,aAAa,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACxF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACxF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACtF,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AAAA,EACpF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AAAA,EACpF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AACtF;","names":[]}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ripperdoc-chrome77/tokens",
+  "version": "1.0.0-beta",
+  "description": "Design tokens and shared foundations for Ripperdoc design system",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./foundations.css": "./src/foundations.css"
+  },
+  "files": [
+    "dist",
+    "src/foundations.css",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup && tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/foundations.css

@@ -0,0 +1,143 @@
+/**
+ * Ripperdoc Shared Foundations
+ * Global token contract shared across all themes (Obsidian, Luminous, etc.)
+ */
+:root {
+  /* Font Families */
+  --rd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --rd-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* Spacing Scale (4px Baseline) */
+  --rd-space-1: 4px;
+  --rd-space-2: 8px;
+  --rd-space-3: 12px;
+  --rd-space-4: 16px;
+  --rd-space-5: 20px;
+  --rd-space-6: 24px;
+  --rd-space-8: 32px;
+  --rd-space-10: 40px;
+  --rd-space-12: 48px;
+  --rd-space-16: 64px;
+
+  /* Radius Scale */
+  --rd-radius-sm: 4px;
+  --rd-radius-default: 8px;
+  --rd-radius-md: 12px;
+  --rd-radius-lg: 16px;
+  --rd-radius-xl: 24px;
+  --rd-radius-full: 9999px;
+
+  /* Motion & Durations */
+  --rd-duration-fast: 150ms;
+  --rd-duration-normal: 250ms;
+  --rd-duration-slow: 400ms;
+  --rd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --rd-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --rd-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+
+  /* Layout Constraints */
+  --rd-container-max-width: 1440px;
+  --rd-container-margin-mobile: 16px;
+  --rd-container-margin-desktop: 48px;
+  --rd-gutter: 16px;
+}
+
+/* Tabular figures for runtimes, timers, episode numbers */
+.rd-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Typography Utility Classes */
+.rd-display-hero {
+  font-family: var(--rd-font-sans);
+  font-size: 48px;
+  line-height: 56px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+.rd-headline-xl {
+  font-family: var(--rd-font-sans);
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.rd-headline-lg {
+  font-family: var(--rd-font-sans);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.rd-headline-md {
+  font-family: var(--rd-font-sans);
+  font-size: 22px;
+  line-height: 28px;
+  font-weight: 600;
+  letter-spacing: -0.015em;
+}
+
+.rd-headline-sm {
+  font-family: var(--rd-font-sans);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.rd-title-md {
+  font-family: var(--rd-font-sans);
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+.rd-body-lg {
+  font-family: var(--rd-font-sans);
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 400;
+}
+
+.rd-body-md {
+  font-family: var(--rd-font-sans);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.rd-body-sm {
+  font-family: var(--rd-font-sans);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+.rd-label-lg {
+  font-family: var(--rd-font-sans);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.rd-label-md {
+  font-family: var(--rd-font-sans);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.rd-label-sm {
+  font-family: var(--rd-font-sans);
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}