@cyberskill/design 2.0.0 → 2.2.0

package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html

@@ -5,6 +5,7 @@
 <title>HR Suite · Danh mục hồ sơ & checklist nhận việc — Onboarding Checklist · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="HR Suite · Danh mục hồ sơ & checklist nhận việc — Onboarding Checklist · CyberSkill reference in the CyberSkill Design System." />
 <meta name="omelette-owns-print" content="1">
 <script src="./support.js"></script>
 </head>

package/templates/vn-onboarding-checklist/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-pdpl-consent/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-performance-evaluation-regulation/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-performance-review-form/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-phantom-stock/VnPhantomStock.dc.html

@@ -5,6 +5,7 @@
 <title>HR Suite · Thỏa thuận Cổ phần ảo — Phantom Stock Agreement · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="HR Suite · Thỏa thuận Cổ phần ảo — Phantom Stock Agreement · CyberSkill reference in the CyberSkill Design System." />
 <meta name="omelette-owns-print" content="1">
 <script src="./support.js"></script>
 </head>

package/templates/vn-phantom-stock/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-probation-contract/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html

@@ -5,6 +5,7 @@
 <title>HR Suite · Phiếu xác nhận đã nhận tài liệu — Acknowledgement of Receipt · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="HR Suite · Phiếu xác nhận đã nhận tài liệu — Acknowledgement of Receipt · CyberSkill reference in the CyberSkill Design System." />
 <meta name="omelette-owns-print" content="1">
 <script src="./support.js"></script>
 </head>

package/templates/vn-receipt-acknowledgement/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-remote-work-policy/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-resignation-letter/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-salary-scale/VnSalaryScale.dc.html

@@ -5,6 +5,7 @@
 <title>HR Suite · Thang lương, Bảng lương — Salary Scale & Payroll Table · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="HR Suite · Thang lương, Bảng lương — Salary Scale & Payroll Table · CyberSkill reference in the CyberSkill Design System." />
 <meta name="omelette-owns-print" content="1">
 <script src="./support.js"></script>
 </head>

package/templates/vn-salary-scale/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-sow-appendix/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-termination-decision/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-total-rewards-appendix/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-training-commitment/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/templates/vn-travel-expense-policy/support.js

@@ -90,7 +90,7 @@
     const R = window.React;
     return Array.from(nodes).map((node, index) => {
       const key = prefix + index;
-      if (node.nodeType === Node.TEXT_NODE) return binding(node.textContent, scope);
+      if (node.nodeType === Node.TEXT_NODE) return node.textContent.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, (_, name) => String(resolveName(name.trim(), scope) ?? ''));
       if (node.nodeType !== Node.ELEMENT_NODE) return null;
       const tag = node.localName;
       const control = tag === 'template' ? node.getAttribute('data-cs-dc-control') : tag === 'sc-for' ? 'for' : tag === 'sc-if' ? 'if' : null;

package/tokens/base-inventory.json

@@ -161,7 +161,7 @@
       },
       "--cs-component-button-xs-padding-y": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-xs-paddingY.",
+        "$description": "Owns the value. --cs-component-button-xs-paddingY reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-xs-paddingY",
@@ -171,7 +171,7 @@
       },
       "--cs-component-button-xs-padding-x": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-xs-paddingX.",
+        "$description": "Owns the value. --cs-component-button-xs-paddingX reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-xs-paddingX",
@@ -181,7 +181,7 @@
       },
       "--cs-component-button-xs-min-height": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-xs-minHeight.",
+        "$description": "Owns the value. --cs-component-button-xs-minHeight reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-xs-minHeight",
@@ -191,7 +191,7 @@
       },
       "--cs-component-button-xs-min-width": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-xs-minWidth.",
+        "$description": "Owns the value. --cs-component-button-xs-minWidth reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-xs-minWidth",
@@ -201,7 +201,7 @@
       },
       "--cs-component-button-xs-min-height-coarse": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-xs-minHeight-coarse.",
+        "$description": "Owns the value. --cs-component-button-xs-minHeight-coarse reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-xs-minHeight-coarse",
@@ -211,7 +211,7 @@
       },
       "--cs-component-button-sm-padding-y": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-sm-paddingY.",
+        "$description": "Owns the value. --cs-component-button-sm-paddingY reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-sm-paddingY",
@@ -221,7 +221,7 @@
       },
       "--cs-component-button-sm-padding-x": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-sm-paddingX.",
+        "$description": "Owns the value. --cs-component-button-sm-paddingX reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-sm-paddingX",
@@ -231,7 +231,7 @@
       },
       "--cs-component-button-sm-min-height": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-sm-minHeight.",
+        "$description": "Owns the value. --cs-component-button-sm-minHeight reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-sm-minHeight",
@@ -241,7 +241,7 @@
       },
       "--cs-component-button-sm-min-height-coarse": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-sm-minHeight-coarse.",
+        "$description": "Owns the value. --cs-component-button-sm-minHeight-coarse reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-sm-minHeight-coarse",
@@ -251,7 +251,7 @@
       },
       "--cs-component-button-md-padding-y": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-md-paddingY.",
+        "$description": "Owns the value. --cs-component-button-md-paddingY reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-md-paddingY",
@@ -261,7 +261,7 @@
       },
       "--cs-component-button-md-padding-x": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-md-paddingX.",
+        "$description": "Owns the value. --cs-component-button-md-paddingX reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-md-paddingX",
@@ -271,7 +271,7 @@
       },
       "--cs-component-button-md-min-height": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-md-minHeight.",
+        "$description": "Owns the value. --cs-component-button-md-minHeight reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-md-minHeight",
@@ -281,7 +281,7 @@
       },
       "--cs-component-button-md-min-height-coarse": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-md-minHeight-coarse.",
+        "$description": "Owns the value. --cs-component-button-md-minHeight-coarse reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-md-minHeight-coarse",
@@ -291,7 +291,7 @@
       },
       "--cs-component-button-lg-padding-y": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-lg-paddingY.",
+        "$description": "Owns the value. --cs-component-button-lg-paddingY reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-lg-paddingY",
@@ -301,7 +301,7 @@
       },
       "--cs-component-button-lg-padding-x": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-lg-paddingX.",
+        "$description": "Owns the value. --cs-component-button-lg-paddingX reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-lg-paddingX",
@@ -311,7 +311,7 @@
       },
       "--cs-component-button-lg-min-height": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-button-lg-minHeight.",
+        "$description": "Owns the value. --cs-component-button-lg-minHeight reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-button-lg-minHeight",
@@ -321,7 +321,7 @@
       },
       "--cs-component-textfield-padding-y": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-textfield-paddingY.",
+        "$description": "Owns the value. --cs-component-textfield-paddingY reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-textfield-paddingY",
@@ -331,7 +331,7 @@
       },
       "--cs-component-textfield-padding-x": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-textfield-paddingX.",
+        "$description": "Owns the value. --cs-component-textfield-paddingX reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-textfield-paddingX",
@@ -341,7 +341,7 @@
       },
       "--cs-component-textfield-min-height": {
         "$type": "dimension",
-        "$description": "Alias of --cs-component-textfield-minHeight.",
+        "$description": "Owns the value. --cs-component-textfield-minHeight reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-component-textfield-minHeight",
@@ -670,7 +670,7 @@
       },
       "--cs-font-line-height-body": {
         "$type": "number",
-        "$description": "Alias of --cs-font-lineHeight-body.",
+        "$description": "Owns the value. --cs-font-lineHeight-body reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-font-lineHeight-body",
@@ -680,7 +680,7 @@
       },
       "--cs-font-line-height-heading": {
         "$type": "number",
-        "$description": "Alias of --cs-font-lineHeight-heading.",
+        "$description": "Owns the value. --cs-font-lineHeight-heading reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-font-lineHeight-heading",
@@ -690,7 +690,7 @@
       },
       "--cs-font-line-height-tight": {
         "$type": "number",
-        "$description": "Alias of --cs-font-lineHeight-tight.",
+        "$description": "Owns the value. --cs-font-lineHeight-tight reads this name.",
         "$extensions": {
           "com.cyberskill": {
             "nativeAliasOf": "--cs-font-lineHeight-tight",

package/tokens/component-tokens.css

@@ -8,47 +8,47 @@
   --cs-component-button-primary-fg: #FFFFFF;
   --cs-component-button-gap: 8px;
   --cs-component-button-radius: 8px;
-  --cs-component-button-xs-paddingY: 4px;
-  --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
-  --cs-component-button-xs-paddingX: 10px;
-  --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
-  --cs-component-button-xs-minHeight: 28px;
-  --cs-component-button-xs-min-height: var(--cs-component-button-xs-minHeight);
-  --cs-component-button-xs-minWidth: 28px;
-  --cs-component-button-xs-min-width: var(--cs-component-button-xs-minWidth);
-  --cs-component-button-xs-minHeight-coarse: 44px;
-  --cs-component-button-xs-min-height-coarse: var(--cs-component-button-xs-minHeight-coarse);
-  --cs-component-button-sm-paddingY: 8px;
-  --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
-  --cs-component-button-sm-paddingX: 14px;
-  --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
-  --cs-component-button-sm-minHeight: 36px;
-  --cs-component-button-sm-min-height: var(--cs-component-button-sm-minHeight);
-  --cs-component-button-sm-minHeight-coarse: 44px;
-  --cs-component-button-sm-min-height-coarse: var(--cs-component-button-sm-minHeight-coarse);
-  --cs-component-button-md-paddingY: 12px;
-  --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
-  --cs-component-button-md-paddingX: 20px;
-  --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
-  --cs-component-button-md-minHeight: 44px;
-  --cs-component-button-md-min-height: var(--cs-component-button-md-minHeight);
-  --cs-component-button-md-minHeight-coarse: 44px;
-  --cs-component-button-md-min-height-coarse: var(--cs-component-button-md-minHeight-coarse);
-  --cs-component-button-lg-paddingY: 16px;
-  --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
-  --cs-component-button-lg-paddingX: 28px;
-  --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
-  --cs-component-button-lg-minHeight: 52px;
-  --cs-component-button-lg-min-height: var(--cs-component-button-lg-minHeight);
+  --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
+  --cs-component-button-xs-padding-y: 4px;
+  --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
+  --cs-component-button-xs-padding-x: 10px;
+  --cs-component-button-xs-minHeight: var(--cs-component-button-xs-min-height);
+  --cs-component-button-xs-min-height: 28px;
+  --cs-component-button-xs-minWidth: var(--cs-component-button-xs-min-width);
+  --cs-component-button-xs-min-width: 28px;
+  --cs-component-button-xs-minHeight-coarse: var(--cs-component-button-xs-min-height-coarse);
+  --cs-component-button-xs-min-height-coarse: 44px;
+  --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
+  --cs-component-button-sm-padding-y: 8px;
+  --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
+  --cs-component-button-sm-padding-x: 14px;
+  --cs-component-button-sm-minHeight: var(--cs-component-button-sm-min-height);
+  --cs-component-button-sm-min-height: 36px;
+  --cs-component-button-sm-minHeight-coarse: var(--cs-component-button-sm-min-height-coarse);
+  --cs-component-button-sm-min-height-coarse: 44px;
+  --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
+  --cs-component-button-md-padding-y: 12px;
+  --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
+  --cs-component-button-md-padding-x: 20px;
+  --cs-component-button-md-minHeight: var(--cs-component-button-md-min-height);
+  --cs-component-button-md-min-height: 44px;
+  --cs-component-button-md-minHeight-coarse: var(--cs-component-button-md-min-height-coarse);
+  --cs-component-button-md-min-height-coarse: 44px;
+  --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
+  --cs-component-button-lg-padding-y: 16px;
+  --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
+  --cs-component-button-lg-padding-x: 28px;
+  --cs-component-button-lg-minHeight: var(--cs-component-button-lg-min-height);
+  --cs-component-button-lg-min-height: 52px;
 
   /* TextField */
   --cs-component-textfield-border-default: #BFA58F;
-  --cs-component-textfield-paddingY: 10px;
-  --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
-  --cs-component-textfield-paddingX: 12px;
-  --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
-  --cs-component-textfield-minHeight: 44px;
-  --cs-component-textfield-min-height: var(--cs-component-textfield-minHeight);
+  --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
+  --cs-component-textfield-padding-y: 10px;
+  --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
+  --cs-component-textfield-padding-x: 12px;
+  --cs-component-textfield-minHeight: var(--cs-component-textfield-min-height);
+  --cs-component-textfield-min-height: 44px;
 }
 
 /* Dark theme: CTA becomes Ochre-on-dark; field border warms up. */