@lemmo-lab/tokens 1.0.0 → 1.0.1

package/dist/js/tokens.d.ts

@@ -17,5 +17,6 @@ export declare const tokens: {
   themes: typeof themes;
   defaultTheme: any;
   lightTheme: any;
+  [key: string]: any;
 };
 export default tokens;

package/dist/js/tokens.js

@@ -164,6 +164,34 @@ export const core = {
     "glossInset": "inset 0 -2px 2px 0 rgba(255, 255, 255, 0.4), inset 0 2px 2px 0 rgba(255, 255, 255, 0.4)",
     "glowBrand": "0 0 0.4rem color-mix(in srgb, #d1fe17 56%, transparent)"
   },
+  "gradient": {
+    "surfaceFeatured": "linear-gradient(225deg, rgba(209, 254, 23, 0.16) 0%, rgba(209, 254, 23, 0.08) 28%, rgba(209, 254, 23, 0) 62%), var(--lemmo-color-surface-elevated, #18191C)",
+    "surfacePinkHaze": "radial-gradient(145% 54% at 100% 0%, color-mix(in srgb, var(--lemmo-color-surface-brand-secondary) 32%, transparent) 0%, color-mix(in srgb, var(--lemmo-color-surface-brand-secondary) 15%, transparent) 42%, transparent 78%), linear-gradient(180deg, color-mix(in srgb, var(--lemmo-color-surface-brand-secondary) 13%, transparent) 0%, color-mix(in srgb, var(--lemmo-color-surface-brand-secondary) 7%, transparent) 36%, transparent 72%), #18191C",
+    "surfaceOlive": "linear-gradient(180deg, #1F2022 0%, #222420 55%, #272A20 100%)",
+    "surfaceOcean": "linear-gradient(180deg, #121D23 0%, #152026 45%, #1D282E 75%, #273238 100%)",
+    "surfaceSteel": "linear-gradient(180deg, #1F2024 0%, #232428 40%, #343539 75%, #48494D 100%)",
+    "surfaceBase": "linear-gradient(180deg, #1D1F20 0%, #17191B 100%)",
+    "surfaceSoft": "radial-gradient(58% 220% at 3% 42%, rgba(255,255,255,0.095) 0%, rgba(255,255,255,0.035) 42%, rgba(255,255,255,0.012) 100%), linear-gradient(180deg, #1D1F20 0%, #17191B 100%)",
+    "surfaceLimeWash": "radial-gradient(56.49% 230.73% at 2.37% 40.91%, rgba(187,251,12,0.07) 0%, rgba(12,251,32,0.01) 100%), radial-gradient(41.8% 183.68% at 10.4% 53.71%, rgba(197,197,197,0.08) 0%, rgba(197,197,197,0.01) 100%), linear-gradient(180deg, #1D1F20 0%, #17191B 100%)",
+    "surfacePinkWash": "radial-gradient(56.49% 230.73% at 2.37% 40.91%, rgba(237,21,114,0.10) 0%, rgba(237,21,114,0.01) 100%), linear-gradient(180deg, #1D1F20 0%, #17191B 100%)",
+    "surfaceBlueWash": "radial-gradient(56.49% 230.73% at 2.37% 40.91%, rgba(21,68,237,0.10) 0%, rgba(21,68,237,0.01) 100%), linear-gradient(180deg, #1D1F20 0%, #17191B 100%)",
+    "surfaceSteelFlat": "linear-gradient(180deg, rgba(110,145,188,0.02) 0%, rgba(110,145,188,0.20) 100%), #1C1E20",
+    "surfacePlain": "linear-gradient(180deg, rgb(29,31,32) 0%, rgb(23,25,27) 100%)",
+    "rimVertical": "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.09) 18%, rgba(255,255,255,0.03) 38%, rgba(255,255,255,0) 72%)",
+    "rimDiagonal": "linear-gradient(225deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0) 76%)",
+    "borderPink": "radial-gradient(86.59% 115.91% at 50% 45.45%, #FB398C 0%, #ED1572 100%)",
+    "borderBlue": "radial-gradient(86.59% 115.91% at 50% 45.45%, #245EF1 0%, #1544ED 100%)",
+    "pillLime": "radial-gradient(ellipse 55% 95% at 73% 50%, rgba(117,239,29,0.6) 0%, rgba(194,237,21,0) 100%), radial-gradient(ellipse 25% 42% at 85% 37%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(ellipse 33% 70% at 12% 76%, rgba(200,239,29,0.6) 0%, rgba(194,237,21,0) 100%), linear-gradient(90deg, rgb(209,254,23) 0%, rgb(209,254,23) 100%)",
+    "pillBlue": "radial-gradient(ellipse 75% 300% at 73% 50%, #1d63ef 0%, #5150d0 45%, rgba(237,21,114,0) 100%), radial-gradient(ellipse 30% 120% at 85% 37%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), #0256fe",
+    "pillUltraviolet": "radial-gradient(ellipse 55% 95% at 73% 50%, rgba(29,99,239,0.6) 0%, rgba(81,80,208,0.45) 25%, rgba(133,60,176,0.3) 50%, rgba(237,21,114,0) 100%), radial-gradient(ellipse 25% 42% at 85% 37%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(ellipse 33% 70% at 12% 76%, rgba(29,99,239,0.6) 0%, rgba(133,60,176,0.3) 50%, rgba(237,21,114,0) 100%), linear-gradient(90deg, rgb(2,86,254) 0%, rgb(2,86,254) 100%)",
+    "pillPink": "radial-gradient(ellipse 55% 95% at 73% 50%, rgba(239,29,186,0.6) 0%, rgba(237,21,114,0) 100%), radial-gradient(ellipse 25% 42% at 85% 37%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(ellipse 33% 70% at 12% 76%, rgba(176,29,239,0.6) 0%, rgba(206,25,176,0.3) 50%, rgba(237,21,114,0) 100%), linear-gradient(90deg, rgb(255,0,91) 0%, rgb(255,0,91) 100%)",
+    "offerBase": "radial-gradient(120% 90% at 50% 0%, #55142c 0%, #35101d 38%, #1e0c14 70%, #140a0f 100%)",
+    "offerFlash": "linear-gradient(0deg, rgba(255,0,91,0.32) 0%, rgba(255,0,91,0.016) 100%), linear-gradient(90deg, #0f1113 0%, #0f1113 100%)",
+    "offerDots": "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)",
+    "offerCombo": "linear-gradient(135deg, #ff005b 0%, #d1004e 40%, #8b006a 100%)",
+    "tableCyan": "radial-gradient(211% 211% at 50.16% 100%, rgba(60,140,255,0.20) 0%, rgba(60,140,255,0) 100%), radial-gradient(64.4% 64.4% at 50.16% 100%, rgba(60,216,255,0.20) 0%, rgba(60,216,255,0) 100%), rgba(255,255,255,0.05)",
+    "overlayDarken": "linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))"
+  },
   "motion": {
     "duration": {
       "fast": "100ms",
@@ -206,14 +234,21 @@ export const core = {
     "lg": "64rem",
     "xl": "80rem",
     "2xl": "120rem",
-    "3xl": "158rem"
+    "3xl": "158rem",
+    "tablet": "var(--lemmo-bp-md)",
+    "desktop": "var(--lemmo-bp-xl)",
+    "wide": "var(--lemmo-bp-2xl)"
   },
   "stroke": {
     "none": "0",
     "hairline": "0.5px",
     "thin": "1px",
     "medium": "1.5px",
-    "thick": "2px"
+    "thick": "2px",
+    "rim": "var(--lemmo-stroke-thin)",
+    "border": "var(--lemmo-stroke-thin)",
+    "borderGradient": "var(--lemmo-stroke-thick)",
+    "divider": "var(--lemmo-stroke-hairline)"
   },
   "size": {
     "control": {
@@ -234,11 +269,28 @@ export const core = {
       "default": "3.25rem",
       "compact": "2.25rem"
     },
+    "gutter": "1rem",
     "container": {
       "base": "100%",
+      "sm": "40rem",
+      "md": "48rem",
+      "lg": "64rem",
+      "xl": "80rem",
+      "2xl": "120rem",
+      "3xl": "158rem",
+      "media": "calc(100vw - 2rem)",
       "copy": "80rem",
       "content": "56rem",
       "wide": "96rem"
+    },
+    "pricing": {
+      "columnSm": "66.5rem",
+      "columnLg": "89rem",
+      "maxDefault": "90rem",
+      "maxWide": "92rem",
+      "padX": "1rem",
+      "padXLg": "3.75rem",
+      "padY": "2rem"
     }
   },
   "spacing": {
@@ -412,32 +464,32 @@ export const semantic = {
         "background": "#5c000f",
         "foreground": "#ff5462",
         "border": "#fa0019",
-        "glow": "{color.status.danger.glow}"
+        "glow": "#ff1f2e"
       },
       "warning": {
         "background": "#523f00",
         "foreground": "#ffef33",
         "border": "#dfab01",
-        "glow": "{color.status.warning.glow}"
+        "glow": "#fff05a"
       },
       "success": {
         "background": "#0d4a17",
         "foreground": "#4ee466",
         "border": "#2eb844",
-        "glow": "{color.status.success.glow}"
+        "glow": "#00e62e"
       },
       "info": {
         "background": "#000d26",
         "foreground": "#5b91fe",
         "border": "#0256fe",
-        "glow": "{color.status.info.glow}"
+        "glow": "#3cd8ff"
       }
     }
   },
   "radius": {
-    "base": "{radius.base}",
+    "base": ".5rem",
     "badge": "calc({radius.base} * 0.75)",
-    "control": "{radius.base}",
+    "control": ".5rem",
     "card": "calc({radius.base} * 1.5)",
     "media": "calc({radius.base} * 2)",
     "featuredCard": "calc({radius.base} * 2.5)",
@@ -526,30 +578,30 @@ export const themes = {
         "background": "#5c000f",
         "foreground": "#ff5462",
         "border": "#fa0019",
-        "glow": "{color.status.danger.glow}"
+        "glow": "#ff1f2e"
       },
       "warning": {
         "background": "#523f00",
         "foreground": "#ffef33",
         "border": "#dfab01",
-        "glow": "{color.status.warning.glow}"
+        "glow": "#fff05a"
       },
       "success": {
         "background": "#0d4a17",
         "foreground": "#4ee466",
         "border": "#2eb844",
-        "glow": "{color.status.success.glow}"
+        "glow": "#00e62e"
       },
       "info": {
         "background": "#000d26",
         "foreground": "#5b91fe",
         "border": "#0256fe",
-        "glow": "{color.status.info.glow}"
+        "glow": "#3cd8ff"
       }
     }
   },
   "radius": {
-    "base": "{radius.base}"
+    "base": ".5rem"
   },
   "shadow": {
     "cardFeatured": "0 1.5rem 4rem rgba(0, 0, 0, 0.24)",
@@ -650,7 +702,7 @@ export const themes = {
     }
   },
   "radius": {
-    "base": "{radius.base}"
+    "base": ".5rem"
   },
   "shadow": {
     "cardFeatured": "0 1.5rem 4rem rgba(0, 0, 0, 0.08)",

package/dist/tailwind/preset.js

@@ -7,31 +7,31 @@ export default {
     extend: {
       colors: {
         page: {
-          primary: 'var(--lemu-page-background, var(--lemmo-page-background))',
-          foreground: 'var(--lemu-page-foreground, var(--lemmo-page-foreground))',
+          primary: 'var(--lemu-page-background, var(--lemmo-color-page-primary, #131517))',
+          foreground: 'var(--lemu-page-foreground, var(--lemmo-color-font-primary, #e1e1e3))',
         },
         surface: {
-          primary: 'var(--lemu-surface-primary-background, var(--lemmo-surface-primary-background))',
-          secondary: 'var(--lemu-surface-secondary-background, var(--lemmo-surface-secondary-background))',
-          tertiary: 'var(--lemu-surface-tertiary-background, var(--lemmo-surface-tertiary-background))',
-          elevated: 'var(--lemu-surface-elevated-background, var(--lemmo-surface-elevated-background))',
-          brand: 'var(--lemu-surface-brand-background, var(--lemmo-surface-brand-background))',
+          primary: 'var(--lemu-surface-primary, var(--lemmo-color-surface-primary, #1c1e20))',
+          secondary: 'var(--lemu-surface-secondary, var(--lemmo-color-surface-secondary, #23262a))',
+          tertiary: 'var(--lemu-surface-tertiary, var(--lemmo-color-surface-tertiary, #0f1113))',
+          elevated: 'var(--lemu-surface-elevated, var(--lemmo-color-surface-elevated, #18191c))',
+          brand: 'var(--lemu-surface-brand, var(--lemmo-color-surface-brand, #d1fe17))',
         },
         brand: {
-          lime: '#d1fe17',
-          pink: '#ff005b',
-          blue: '#0256fe',
+          lime: 'var(--lemmo-color-brand-lime, #d1fe17)',
+          pink: 'var(--lemmo-color-brand-pink, #ff005b)',
+          blue: 'var(--lemmo-color-brand-blue, #0256fe)',
         }
       },
       borderRadius: {
-        control: 'var(--lemu-radius-control, var(--lemmo-radius-control))',
-        card: 'var(--lemu-radius-card, var(--lemmo-radius-card))',
-        badge: 'var(--lemu-radius-badge, var(--lemmo-radius-badge))',
+        control: 'var(--lemmo-radius-control, 0.5rem)',
+        card: 'var(--lemmo-radius-card, 0.75rem)',
+        badge: 'var(--lemmo-radius-badge, 0.375rem)',
       },
       fontFamily: {
-        body: ['var(--lemu-font-body, var(--lemmo-font-body))', 'sans-serif'],
-        heading: ['var(--lemu-font-heading, var(--lemmo-font-heading))', 'sans-serif'],
-        numeric: ['var(--lemu-font-numeric, var(--lemmo-font-numeric))', 'sans-serif'],
+        body: ['var(--lemmo-font-body)', 'sans-serif'],
+        heading: ['var(--lemmo-font-heading)', 'sans-serif'],
+        numeric: ['var(--lemmo-font-numeric)', 'sans-serif'],
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemmo-lab/tokens",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Single source of truth design tokens for Lemmo products",
   "type": "module",
   "main": "./dist/js/tokens.js",
@@ -19,6 +19,7 @@
     "./css/themes/light.css": "./dist/css/themes/light.css",
     "./css/themes/neon.css": "./dist/css/themes/neon.css",
     "./css/themes/midnight.css": "./dist/css/themes/midnight.css",
+    "./css/system-design/*": "./dist/css/system-design/*",
     "./js": {
       "types": "./dist/js/tokens.d.ts",
       "import": "./dist/js/tokens.js",