@etus/tokens 0.4.0-beta.10 → 0.4.0-beta.12

package/dist/tokens.css

@@ -944,30 +944,26 @@
   --extended-chart-3: oklch(62.31% 0.1880 259.81);
   --extended-chart-4: oklch(79.52% 0.1617 86.05);
   --extended-chart-5: oklch(63.68% 0.2078 25.33);
-  --feature-item-body-gap: 4px;
+  --feature-item-badge-bg: oklch(97.05% 0.0142 254.60);
+  --feature-item-badge-border: oklch(88.23% 0.0571 254.13);
+  --feature-item-badge-fg: oklch(48.82% 0.2172 264.38);
+  --feature-item-badge-font-size: 12px;
+  --feature-item-badge-font-weight: 500;
+  --feature-item-badge-line-height: 16px;
+  --feature-item-badge-padding-x: 8px;
+  --feature-item-badge-padding-y: 4px;
+  --feature-item-badge-radius: 2px;
+  --feature-item-body-gap: 8px;
   --feature-item-description-color: oklch(55.55% 0.0000 0);
-  --feature-item-description-font-size: 13px;
-  --feature-item-description-line-height: 1.55;
-  --feature-item-icon-radius: 10px;
-  --feature-item-icon-size: 40px;
-  --feature-item-link-color: oklch(56.08% 0.1221 160.56);
-  --feature-item-link-font-size: 12px;
-  --feature-item-link-font-weight: 600;
-  --feature-item-link-gap: 4px;
-  --feature-item-link-margin-top: 4px;
-  --feature-item-root-gap: 14px;
-  --feature-item-root-padding: 4px;
+  --feature-item-description-font-size: 16px;
+  --feature-item-description-font-weight: 400;
+  --feature-item-description-line-height: 24px;
+  --feature-item-icon-size: 20px;
+  --feature-item-root-gap: 16px;
   --feature-item-title-color: oklch(14.48% 0.0000 0);
-  --feature-item-title-font-size: 14px;
+  --feature-item-title-font-size: 18px;
   --feature-item-title-font-weight: 600;
-  --feature-item-tone-brand-bg: oklch(81.75% 0.1821 159.79);
-  --feature-item-tone-brand-fg: oklch(18.34% 0.0338 166.67);
-  --feature-item-tone-info-bg: oklch(97.05% 0.0142 254.60);
-  --feature-item-tone-info-fg: oklch(48.82% 0.2172 264.38);
-  --feature-item-tone-subtle-bg: oklch(97.65% 0.0243 170.99);
-  --feature-item-tone-subtle-fg: oklch(56.08% 0.1221 160.56);
-  --feature-item-tone-warning-bg: oklch(98.73% 0.0262 102.21);
-  --feature-item-tone-warning-fg: oklch(55.38% 0.1207 66.44);
+  --feature-item-title-line-height: 24px;
   --featured-icon-color-brand-bg: oklch(97.65% 0.0243 170.99);
   --featured-icon-color-brand-fg: oklch(81.75% 0.1821 159.79);
   --featured-icon-color-default-bg: oklch(97.02% 0.0000 0);
@@ -1507,6 +1503,7 @@
   --link-text-lg: 18px;
   --link-text-sm: 14px;
   --link-text-xs: 12px;
+  --logo-conta-size: 24px;
   --markdown-editor-area-background: transparent;
   --markdown-editor-area-foreground: oklch(14.48% 0.0000 0);
   --markdown-editor-area-padding: 16px;
@@ -1744,6 +1741,12 @@
   --payment-input-icon-left: 12px;
   --payment-input-icon-size: 20px;
   --payment-input-root-padding-left: 40px;
+  --payment-method-icon-size-lg-h: 40px;
+  --payment-method-icon-size-lg-w: 58px;
+  --payment-method-icon-size-md-h: 32px;
+  --payment-method-icon-size-md-w: 46px;
+  --payment-method-icon-size-sm-h: 24px;
+  --payment-method-icon-size-sm-w: 34px;
   --phone-input-country-select-border-color: oklch(92.19% 0.0000 0);
   --phone-input-country-select-border-right-width: 1px;
   --phone-input-country-select-width: 100px;
@@ -3227,17 +3230,11 @@
   --extended-chart-3: oklch(62.31% 0.1880 259.81);
   --extended-chart-4: oklch(79.52% 0.1617 86.05);
   --extended-chart-5: oklch(63.68% 0.2078 25.33);
+  --feature-item-badge-bg: oklch(28.23% 0.0874 267.94);
+  --feature-item-badge-border: oklch(54.61% 0.2152 262.88);
+  --feature-item-badge-fg: oklch(80.91% 0.0956 251.81);
   --feature-item-description-color: oklch(71.55% 0.0000 0);
-  --feature-item-link-color: oklch(87.18% 0.1296 166.48);
   --feature-item-title-color: oklch(98.51% 0.0000 0);
-  --feature-item-tone-brand-bg: oklch(84.11% 0.1609 163.31);
-  --feature-item-tone-brand-fg: oklch(18.34% 0.0338 166.67);
-  --feature-item-tone-info-bg: oklch(28.23% 0.0874 267.94);
-  --feature-item-tone-info-fg: oklch(80.91% 0.0956 251.81);
-  --feature-item-tone-subtle-bg: oklch(18.34% 0.0338 166.67);
-  --feature-item-tone-subtle-fg: oklch(87.18% 0.1296 166.48);
-  --feature-item-tone-warning-bg: oklch(28.57% 0.0639 53.81);
-  --feature-item-tone-warning-fg: oklch(90.52% 0.1657 98.11);
   --featured-icon-color-brand-bg: oklch(18.34% 0.0338 166.67);
   --featured-icon-color-brand-fg: oklch(84.11% 0.1609 163.31);
   --featured-icon-color-default-bg: oklch(37.15% 0.0000 0);
@@ -4003,17 +4000,11 @@
   --extended-chart-3: oklch(62.31% 0.1880 259.81);
   --extended-chart-4: oklch(79.52% 0.1617 86.05);
   --extended-chart-5: oklch(63.68% 0.2078 25.33);
+  --feature-item-badge-bg: oklch(97.05% 0.0142 254.60);
+  --feature-item-badge-border: oklch(88.23% 0.0571 254.13);
+  --feature-item-badge-fg: oklch(48.82% 0.2172 264.38);
   --feature-item-description-color: oklch(55.55% 0.0000 0);
-  --feature-item-link-color: oklch(56.08% 0.1221 160.56);
   --feature-item-title-color: oklch(14.48% 0.0000 0);
-  --feature-item-tone-brand-bg: oklch(81.75% 0.1821 159.79);
-  --feature-item-tone-brand-fg: oklch(18.34% 0.0338 166.67);
-  --feature-item-tone-info-bg: oklch(97.05% 0.0142 254.60);
-  --feature-item-tone-info-fg: oklch(48.82% 0.2172 264.38);
-  --feature-item-tone-subtle-bg: oklch(97.65% 0.0243 170.99);
-  --feature-item-tone-subtle-fg: oklch(56.08% 0.1221 160.56);
-  --feature-item-tone-warning-bg: oklch(98.73% 0.0262 102.21);
-  --feature-item-tone-warning-fg: oklch(55.38% 0.1207 66.44);
   --featured-icon-color-brand-bg: oklch(97.65% 0.0243 170.99);
   --featured-icon-color-brand-fg: oklch(81.75% 0.1821 159.79);
   --featured-icon-color-default-bg: oklch(97.02% 0.0000 0);
@@ -4891,17 +4882,11 @@
   --color-extended-chart-3: var(--extended-chart-3);
   --color-extended-chart-4: var(--extended-chart-4);
   --color-extended-chart-5: var(--extended-chart-5);
+  --color-feature-item-badge-bg: var(--feature-item-badge-bg);
+  --color-feature-item-badge-border: var(--feature-item-badge-border);
+  --color-feature-item-badge-fg: var(--feature-item-badge-fg);
   --color-feature-item-description-color: var(--feature-item-description-color);
-  --color-feature-item-link-color: var(--feature-item-link-color);
   --color-feature-item-title-color: var(--feature-item-title-color);
-  --color-feature-item-tone-brand-bg: var(--feature-item-tone-brand-bg);
-  --color-feature-item-tone-brand-fg: var(--feature-item-tone-brand-fg);
-  --color-feature-item-tone-info-bg: var(--feature-item-tone-info-bg);
-  --color-feature-item-tone-info-fg: var(--feature-item-tone-info-fg);
-  --color-feature-item-tone-subtle-bg: var(--feature-item-tone-subtle-bg);
-  --color-feature-item-tone-subtle-fg: var(--feature-item-tone-subtle-fg);
-  --color-feature-item-tone-warning-bg: var(--feature-item-tone-warning-bg);
-  --color-feature-item-tone-warning-fg: var(--feature-item-tone-warning-fg);
   --color-featured-icon-color-brand-bg: var(--featured-icon-color-brand-bg);
   --color-featured-icon-color-brand-fg: var(--featured-icon-color-brand-fg);
   --color-featured-icon-color-default-bg: var(--featured-icon-color-default-bg);

package/dist/tokens.js

@@ -1088,30 +1088,26 @@ export const tokens = {
     "extended-chart-3": "oklch(62.31% 0.1880 259.81)",
     "extended-chart-4": "oklch(79.52% 0.1617 86.05)",
     "extended-chart-5": "oklch(63.68% 0.2078 25.33)",
-    "feature-item-body-gap": "4px",
+    "feature-item-badge-bg": "oklch(97.05% 0.0142 254.60)",
+    "feature-item-badge-border": "oklch(88.23% 0.0571 254.13)",
+    "feature-item-badge-fg": "oklch(48.82% 0.2172 264.38)",
+    "feature-item-badge-font-size": "12px",
+    "feature-item-badge-font-weight": "500",
+    "feature-item-badge-line-height": "16px",
+    "feature-item-badge-padding-x": "8px",
+    "feature-item-badge-padding-y": "4px",
+    "feature-item-badge-radius": "2px",
+    "feature-item-body-gap": "8px",
     "feature-item-description-color": "oklch(55.55% 0.0000 0)",
-    "feature-item-description-font-size": "13px",
-    "feature-item-description-line-height": "1.55",
-    "feature-item-icon-radius": "10px",
-    "feature-item-icon-size": "40px",
-    "feature-item-link-color": "oklch(56.08% 0.1221 160.56)",
-    "feature-item-link-font-size": "12px",
-    "feature-item-link-font-weight": "600",
-    "feature-item-link-gap": "4px",
-    "feature-item-link-margin-top": "4px",
-    "feature-item-root-gap": "14px",
-    "feature-item-root-padding": "4px",
+    "feature-item-description-font-size": "16px",
+    "feature-item-description-font-weight": "400",
+    "feature-item-description-line-height": "24px",
+    "feature-item-icon-size": "20px",
+    "feature-item-root-gap": "16px",
     "feature-item-title-color": "oklch(14.48% 0.0000 0)",
-    "feature-item-title-font-size": "14px",
+    "feature-item-title-font-size": "18px",
     "feature-item-title-font-weight": "600",
-    "feature-item-tone-brand-bg": "oklch(81.75% 0.1821 159.79)",
-    "feature-item-tone-brand-fg": "oklch(18.34% 0.0338 166.67)",
-    "feature-item-tone-info-bg": "oklch(97.05% 0.0142 254.60)",
-    "feature-item-tone-info-fg": "oklch(48.82% 0.2172 264.38)",
-    "feature-item-tone-subtle-bg": "oklch(97.65% 0.0243 170.99)",
-    "feature-item-tone-subtle-fg": "oklch(56.08% 0.1221 160.56)",
-    "feature-item-tone-warning-bg": "oklch(98.73% 0.0262 102.21)",
-    "feature-item-tone-warning-fg": "oklch(55.38% 0.1207 66.44)",
+    "feature-item-title-line-height": "24px",
     "featured-icon-color-brand-bg": "oklch(97.65% 0.0243 170.99)",
     "featured-icon-color-brand-fg": "oklch(81.75% 0.1821 159.79)",
     "featured-icon-color-default-bg": "oklch(97.02% 0.0000 0)",
@@ -1629,6 +1625,7 @@ export const tokens = {
     "link-text-lg": "18px",
     "link-text-sm": "14px",
     "link-text-xs": "12px",
+    "logo-conta-size": "24px",
     "markdown-editor-area-background": "transparent",
     "markdown-editor-area-foreground": "oklch(14.48% 0.0000 0)",
     "markdown-editor-area-padding": "16px",
@@ -1855,6 +1852,12 @@ export const tokens = {
     "payment-input-icon-left": "12px",
     "payment-input-icon-size": "20px",
     "payment-input-root-padding-left": "40px",
+    "payment-method-icon-size-lg-h": "40px",
+    "payment-method-icon-size-lg-w": "58px",
+    "payment-method-icon-size-md-h": "32px",
+    "payment-method-icon-size-md-w": "46px",
+    "payment-method-icon-size-sm-h": "24px",
+    "payment-method-icon-size-sm-w": "34px",
     "phone-input-country-select-border-color": "oklch(92.19% 0.0000 0)",
     "phone-input-country-select-border-right-width": "1px",
     "phone-input-country-select-width": "100px",

package/dist/tokens.meta.json

@@ -2128,10 +2128,16 @@
         "value": "500"
       },
       {
-        "name": "feature-item-link-font-weight",
-        "cssVar": "--feature-item-link-font-weight",
+        "name": "feature-item-badge-font-weight",
+        "cssVar": "--feature-item-badge-font-weight",
         "type": "fontWeight",
-        "value": "600"
+        "value": "500"
+      },
+      {
+        "name": "feature-item-description-font-weight",
+        "cssVar": "--feature-item-description-font-weight",
+        "type": "fontWeight",
+        "value": "400"
       },
       {
         "name": "feature-item-title-font-weight",
@@ -8787,78 +8793,89 @@
         "value": "500px"
       },
       {
-        "name": "feature-item-body-gap",
-        "cssVar": "--feature-item-body-gap",
-        "type": "dimension",
-        "value": "4px"
+        "name": "feature-item-badge-bg",
+        "cssVar": "--feature-item-badge-bg",
+        "type": "color",
+        "value": "oklch(97.05% 0.0142 254.60)"
       },
       {
-        "name": "feature-item-description-color",
-        "cssVar": "--feature-item-description-color",
+        "name": "feature-item-badge-border",
+        "cssVar": "--feature-item-badge-border",
         "type": "color",
-        "value": "oklch(55.55% 0.0000 0)"
+        "value": "oklch(88.23% 0.0571 254.13)"
       },
       {
-        "name": "feature-item-description-font-size",
-        "cssVar": "--feature-item-description-font-size",
+        "name": "feature-item-badge-fg",
+        "cssVar": "--feature-item-badge-fg",
+        "type": "color",
+        "value": "oklch(48.82% 0.2172 264.38)"
+      },
+      {
+        "name": "feature-item-badge-font-size",
+        "cssVar": "--feature-item-badge-font-size",
         "type": "fontSize",
-        "value": "13px"
+        "value": "12px"
       },
       {
-        "name": "feature-item-description-line-height",
-        "cssVar": "--feature-item-description-line-height",
+        "name": "feature-item-badge-line-height",
+        "cssVar": "--feature-item-badge-line-height",
         "type": "lineHeight",
-        "value": "1.55"
+        "value": "16px"
       },
       {
-        "name": "feature-item-icon-radius",
-        "cssVar": "--feature-item-icon-radius",
+        "name": "feature-item-badge-padding-x",
+        "cssVar": "--feature-item-badge-padding-x",
         "type": "dimension",
-        "description": "FeatureItem icon plate radius 10px per Figma /Feature-item canonical.",
-        "value": "10px"
+        "value": "8px"
       },
       {
-        "name": "feature-item-icon-size",
-        "cssVar": "--feature-item-icon-size",
+        "name": "feature-item-badge-padding-y",
+        "cssVar": "--feature-item-badge-padding-y",
         "type": "dimension",
-        "description": "FeatureItem icon plate size 40px per Figma /Feature-item canonical.",
-        "value": "40px"
+        "value": "4px"
+      },
+      {
+        "name": "feature-item-badge-radius",
+        "cssVar": "--feature-item-badge-radius",
+        "type": "dimension",
+        "value": "2px"
+      },
+      {
+        "name": "feature-item-body-gap",
+        "cssVar": "--feature-item-body-gap",
+        "type": "dimension",
+        "value": "8px"
       },
       {
-        "name": "feature-item-link-color",
-        "cssVar": "--feature-item-link-color",
+        "name": "feature-item-description-color",
+        "cssVar": "--feature-item-description-color",
         "type": "color",
-        "value": "oklch(56.08% 0.1221 160.56)"
+        "value": "oklch(55.55% 0.0000 0)"
       },
       {
-        "name": "feature-item-link-font-size",
-        "cssVar": "--feature-item-link-font-size",
+        "name": "feature-item-description-font-size",
+        "cssVar": "--feature-item-description-font-size",
         "type": "fontSize",
-        "value": "12px"
+        "value": "16px"
       },
       {
-        "name": "feature-item-link-gap",
-        "cssVar": "--feature-item-link-gap",
-        "type": "dimension",
-        "value": "4px"
+        "name": "feature-item-description-line-height",
+        "cssVar": "--feature-item-description-line-height",
+        "type": "lineHeight",
+        "value": "24px"
       },
       {
-        "name": "feature-item-link-margin-top",
-        "cssVar": "--feature-item-link-margin-top",
+        "name": "feature-item-icon-size",
+        "cssVar": "--feature-item-icon-size",
         "type": "dimension",
-        "value": "4px"
+        "description": "Glifo inline da variante icon. A placa do feature-icon vem do FeaturedIcon.",
+        "value": "20px"
       },
       {
         "name": "feature-item-root-gap",
         "cssVar": "--feature-item-root-gap",
         "type": "dimension",
-        "value": "14px"
-      },
-      {
-        "name": "feature-item-root-padding",
-        "cssVar": "--feature-item-root-padding",
-        "type": "dimension",
-        "value": "4px"
+        "value": "16px"
       },
       {
         "name": "feature-item-title-color",
@@ -8870,55 +8887,13 @@
         "name": "feature-item-title-font-size",
         "cssVar": "--feature-item-title-font-size",
         "type": "fontSize",
-        "value": "14px"
-      },
-      {
-        "name": "feature-item-tone-brand-bg",
-        "cssVar": "--feature-item-tone-brand-bg",
-        "type": "color",
-        "value": "oklch(81.75% 0.1821 159.79)"
-      },
-      {
-        "name": "feature-item-tone-brand-fg",
-        "cssVar": "--feature-item-tone-brand-fg",
-        "type": "color",
-        "value": "oklch(18.34% 0.0338 166.67)"
-      },
-      {
-        "name": "feature-item-tone-info-bg",
-        "cssVar": "--feature-item-tone-info-bg",
-        "type": "color",
-        "value": "oklch(97.05% 0.0142 254.60)"
-      },
-      {
-        "name": "feature-item-tone-info-fg",
-        "cssVar": "--feature-item-tone-info-fg",
-        "type": "color",
-        "value": "oklch(48.82% 0.2172 264.38)"
-      },
-      {
-        "name": "feature-item-tone-subtle-bg",
-        "cssVar": "--feature-item-tone-subtle-bg",
-        "type": "color",
-        "value": "oklch(97.65% 0.0243 170.99)"
-      },
-      {
-        "name": "feature-item-tone-subtle-fg",
-        "cssVar": "--feature-item-tone-subtle-fg",
-        "type": "color",
-        "value": "oklch(56.08% 0.1221 160.56)"
-      },
-      {
-        "name": "feature-item-tone-warning-bg",
-        "cssVar": "--feature-item-tone-warning-bg",
-        "type": "color",
-        "value": "oklch(98.73% 0.0262 102.21)"
+        "value": "18px"
       },
       {
-        "name": "feature-item-tone-warning-fg",
-        "cssVar": "--feature-item-tone-warning-fg",
-        "type": "color",
-        "value": "oklch(55.38% 0.1207 66.44)"
+        "name": "feature-item-title-line-height",
+        "cssVar": "--feature-item-title-line-height",
+        "type": "lineHeight",
+        "value": "24px"
       },
       {
         "name": "featured-icon-color-brand-bg",
@@ -11334,6 +11309,13 @@
         "type": "fontSize",
         "value": "12px"
       },
+      {
+        "name": "logo-conta-size",
+        "cssVar": "--logo-conta-size",
+        "type": "dimension",
+        "description": "LogoConta circular badge diameter (24px per Figma /Logo-Conta canonical, node 1138:2959).",
+        "value": "24px"
+      },
       {
         "name": "markdown-editor-area-background",
         "cssVar": "--markdown-editor-area-background",
@@ -12615,6 +12597,43 @@
         "type": "dimension",
         "value": "40px"
       },
+      {
+        "name": "payment-method-icon-size-lg-h",
+        "cssVar": "--payment-method-icon-size-lg-h",
+        "type": "dimension",
+        "value": "40px"
+      },
+      {
+        "name": "payment-method-icon-size-lg-w",
+        "cssVar": "--payment-method-icon-size-lg-w",
+        "type": "dimension",
+        "value": "58px"
+      },
+      {
+        "name": "payment-method-icon-size-md-h",
+        "cssVar": "--payment-method-icon-size-md-h",
+        "type": "dimension",
+        "value": "32px"
+      },
+      {
+        "name": "payment-method-icon-size-md-w",
+        "cssVar": "--payment-method-icon-size-md-w",
+        "type": "dimension",
+        "value": "46px"
+      },
+      {
+        "name": "payment-method-icon-size-sm-h",
+        "cssVar": "--payment-method-icon-size-sm-h",
+        "type": "dimension",
+        "value": "24px"
+      },
+      {
+        "name": "payment-method-icon-size-sm-w",
+        "cssVar": "--payment-method-icon-size-sm-w",
+        "type": "dimension",
+        "description": "PaymentMethodIcon sm card width per Figma /Payment-method-icon frame (node 1027-13162).",
+        "value": "34px"
+      },
       {
         "name": "phone-input-country-select-border-color",
         "cssVar": "--phone-input-country-select-border-color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etus/tokens",
-  "version": "0.4.0-beta.10",
+  "version": "0.4.0-beta.12",
   "description": "Seven Design System - Design tokens (CSS variables) for ETUS applications",
   "license": "MIT",
   "repository": {