Merge pull request #657 from pixiv/chore/css-variables-add-px-suffix

chore(token-cli): figma から得られる float に suffix px を付ける
pixiv · Dec 13, 2024 · 044795e · 044795e
2 parents a96bcf7 + 68a3f2c
commit 044795e
Show file tree

Hide file tree

Showing 8 changed files with 705 additions and 633 deletions.
diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css
@@ -1,77 +1,82 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Dec 2024 10:10:08 GMT
+ * Generated on Fri, 13 Dec 2024 10:18:27 GMT
  */
 
 :root[data-theme='dark'] {
-  --charcoal-border-width-l: 2;
-  --charcoal-border-width-m: 1;
-  --charcoal-radius-oval: 999999;
-  --charcoal-paragraph-width-l-cozy: 924;
-  --charcoal-paragraph-width-m-cozy: 616;
-  --charcoal-paragraph-width-s-cozy: 588;
-  --charcoal-paragraph-width-l-compact: 588;
-  --charcoal-paragraph-width-m-compact: 392;
-  --charcoal-paragraph-width-s-compact: 280;
-  --charcoal-paragraph-width-l: 672;
-  --charcoal-paragraph-width-m: 448;
-  --charcoal-paragraph-width-s: 320;
+  --charcoal-border-width-l: 2px;
+  --charcoal-border-width-m: 1px;
+  --charcoal-paragraph-width-l-cozy: 924px;
+  --charcoal-paragraph-width-m-cozy: 616px;
+  --charcoal-paragraph-width-s-cozy: 588px;
+  --charcoal-paragraph-width-l-compact: 588px;
+  --charcoal-paragraph-width-m-compact: 392px;
+  --charcoal-paragraph-width-s-compact: 280px;
+  --charcoal-paragraph-width-l: 672px;
+  --charcoal-paragraph-width-m: 448px;
+  --charcoal-paragraph-width-s: 320px;
+  --charcoal-radius-oval: 999999px;
+  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
+  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
+  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
+  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
+  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-text-font-family-sans: Sarasa UI J;
-  --charcoal-text-line-height-100: 72;
-  --charcoal-text-line-height-90: 64;
-  --charcoal-text-line-height-80: 56;
-  --charcoal-text-line-height-70: 52;
-  --charcoal-text-line-height-60: 44;
-  --charcoal-text-line-height-50: 40;
-  --charcoal-text-line-height-40: 36;
-  --charcoal-text-line-height-30: 32;
-  --charcoal-text-line-height-20: 28;
-  --charcoal-text-line-height-10: 24;
-  --charcoal-text-line-height-5: 20;
-  --charcoal-text-line-height-1: 18;
-  --charcoal-text-font-weight-70: 700;
-  --charcoal-text-font-weight-40: 400;
-  --charcoal-text-line-height-0: 16;
-  --charcoal-text-font-size-120: 60;
-  --charcoal-text-font-size-110: 50;
-  --charcoal-text-font-size-100: 45;
-  --charcoal-text-font-size-90: 40;
-  --charcoal-text-font-size-80: 36;
-  --charcoal-text-font-size-70: 32;
-  --charcoal-text-font-size-60: 28;
-  --charcoal-text-font-size-50: 25;
-  --charcoal-text-font-size-40: 22;
-  --charcoal-text-font-size-30: 20;
-  --charcoal-text-font-size-20: 18;
-  --charcoal-text-font-size-10: 16;
-  --charcoal-text-font-size-5: 14;
-  --charcoal-text-font-size-1: 12;
-  --charcoal-text-font-size-0: 11;
-  --charcoal-space-target-l: 48;
-  --charcoal-space-target-m: 40;
-  --charcoal-space-target-s: 32;
-  --charcoal-space-target-xs: 24;
-  --charcoal-space-999: 999999;
-  --charcoal-space-100: 440;
-  --charcoal-space-90: 272;
-  --charcoal-space-80: 168;
-  --charcoal-space-70: 104;
-  --charcoal-space-66: 96;
-  --charcoal-space-63: 80;
-  --charcoal-space-60: 64;
-  --charcoal-space-55: 48;
-  --charcoal-space-50: 40;
-  --charcoal-space-46: 32;
-  --charcoal-space-43: 28;
-  --charcoal-space-40: 24;
-  --charcoal-space-35: 20;
-  --charcoal-space-30: 16;
-  --charcoal-space-25: 12;
-  --charcoal-space-20: 8;
-  --charcoal-space-15: 6;
-  --charcoal-space-10: 4;
-  --charcoal-space-1: 2;
-  --charcoal-space-0: 0;
+  --charcoal-text-line-height-100: 72px;
+  --charcoal-text-line-height-90: 64px;
+  --charcoal-text-line-height-80: 56px;
+  --charcoal-text-line-height-70: 52px;
+  --charcoal-text-line-height-60: 44px;
+  --charcoal-text-line-height-50: 40px;
+  --charcoal-text-line-height-40: 36px;
+  --charcoal-text-line-height-30: 32px;
+  --charcoal-text-line-height-20: 28px;
+  --charcoal-text-line-height-10: 24px;
+  --charcoal-text-line-height-5: 20px;
+  --charcoal-text-line-height-1: 18px;
+  --charcoal-text-font-weight-70: 700px;
+  --charcoal-text-font-weight-40: 400px;
+  --charcoal-text-line-height-0: 16px;
+  --charcoal-text-font-size-120: 60px;
+  --charcoal-text-font-size-110: 50px;
+  --charcoal-text-font-size-100: 45px;
+  --charcoal-text-font-size-90: 40px;
+  --charcoal-text-font-size-80: 36px;
+  --charcoal-text-font-size-70: 32px;
+  --charcoal-text-font-size-60: 28px;
+  --charcoal-text-font-size-50: 25px;
+  --charcoal-text-font-size-40: 22px;
+  --charcoal-text-font-size-30: 20px;
+  --charcoal-text-font-size-20: 18px;
+  --charcoal-text-font-size-10: 16px;
+  --charcoal-text-font-size-5: 14px;
+  --charcoal-text-font-size-1: 12px;
+  --charcoal-text-font-size-0: 11px;
+  --charcoal-space-target-l: 48px;
+  --charcoal-space-target-m: 40px;
+  --charcoal-space-target-s: 32px;
+  --charcoal-space-target-xs: 24px;
+  --charcoal-space-999: 999999px;
+  --charcoal-space-100: 440px;
+  --charcoal-space-90: 272px;
+  --charcoal-space-80: 168px;
+  --charcoal-space-70: 104px;
+  --charcoal-space-66: 96px;
+  --charcoal-space-63: 80px;
+  --charcoal-space-60: 64px;
+  --charcoal-space-55: 48px;
+  --charcoal-space-50: 40px;
+  --charcoal-space-46: 32px;
+  --charcoal-space-43: 28px;
+  --charcoal-space-40: 24px;
+  --charcoal-space-35: 20px;
+  --charcoal-space-30: 16px;
+  --charcoal-space-25: 12px;
+  --charcoal-space-20: 8px;
+  --charcoal-space-15: 6px;
+  --charcoal-space-10: 4px;
+  --charcoal-space-1: 2px;
+  --charcoal-space-0: 0px;
   --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
   --charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
   --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
@@ -345,11 +350,6 @@
   --charcoal-color-light-neutral-a-5: rgba(0, 0, 0, 0.047);
   --charcoal-color-light-neutral-a-0: rgba(0, 0, 0, 0);
   --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
-  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
-  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
-  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
-  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
-  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
   --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
   --charcoal-radius-xxl: var(--charcoal-space-40);

diff --git a/packages/theme/src/css/_variables_light.css b/packages/theme/src/css/_variables_light.css
@@ -1,77 +1,82 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Dec 2024 10:10:07 GMT
+ * Generated on Fri, 13 Dec 2024 10:18:25 GMT
  */
 
 :root[data-theme='light'], :root:not([data-theme]) {
-  --charcoal-border-width-l: 2;
-  --charcoal-border-width-m: 1;
-  --charcoal-radius-oval: 999999;
-  --charcoal-paragraph-width-l-cozy: 924;
-  --charcoal-paragraph-width-m-cozy: 616;
-  --charcoal-paragraph-width-s-cozy: 588;
-  --charcoal-paragraph-width-l-compact: 588;
-  --charcoal-paragraph-width-m-compact: 392;
-  --charcoal-paragraph-width-s-compact: 280;
-  --charcoal-paragraph-width-l: 672;
-  --charcoal-paragraph-width-m: 448;
-  --charcoal-paragraph-width-s: 320;
+  --charcoal-border-width-l: 2px;
+  --charcoal-border-width-m: 1px;
+  --charcoal-paragraph-width-l-cozy: 924px;
+  --charcoal-paragraph-width-m-cozy: 616px;
+  --charcoal-paragraph-width-s-cozy: 588px;
+  --charcoal-paragraph-width-l-compact: 588px;
+  --charcoal-paragraph-width-m-compact: 392px;
+  --charcoal-paragraph-width-s-compact: 280px;
+  --charcoal-paragraph-width-l: 672px;
+  --charcoal-paragraph-width-m: 448px;
+  --charcoal-paragraph-width-s: 320px;
+  --charcoal-radius-oval: 999999px;
+  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
+  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
+  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
+  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
+  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-text-font-family-sans: Sarasa UI J;
-  --charcoal-text-line-height-100: 72;
-  --charcoal-text-line-height-90: 64;
-  --charcoal-text-line-height-80: 56;
-  --charcoal-text-line-height-70: 52;
-  --charcoal-text-line-height-60: 44;
-  --charcoal-text-line-height-50: 40;
-  --charcoal-text-line-height-40: 36;
-  --charcoal-text-line-height-30: 32;
-  --charcoal-text-line-height-20: 28;
-  --charcoal-text-line-height-10: 24;
-  --charcoal-text-line-height-5: 20;
-  --charcoal-text-line-height-1: 18;
-  --charcoal-text-font-weight-70: 700;
-  --charcoal-text-font-weight-40: 400;
-  --charcoal-text-line-height-0: 16;
-  --charcoal-text-font-size-120: 60;
-  --charcoal-text-font-size-110: 50;
-  --charcoal-text-font-size-100: 45;
-  --charcoal-text-font-size-90: 40;
-  --charcoal-text-font-size-80: 36;
-  --charcoal-text-font-size-70: 32;
-  --charcoal-text-font-size-60: 28;
-  --charcoal-text-font-size-50: 25;
-  --charcoal-text-font-size-40: 22;
-  --charcoal-text-font-size-30: 20;
-  --charcoal-text-font-size-20: 18;
-  --charcoal-text-font-size-10: 16;
-  --charcoal-text-font-size-5: 14;
-  --charcoal-text-font-size-1: 12;
-  --charcoal-text-font-size-0: 11;
-  --charcoal-space-target-l: 48;
-  --charcoal-space-target-m: 40;
-  --charcoal-space-target-s: 32;
-  --charcoal-space-target-xs: 24;
-  --charcoal-space-999: 999999;
-  --charcoal-space-100: 440;
-  --charcoal-space-90: 272;
-  --charcoal-space-80: 168;
-  --charcoal-space-70: 104;
-  --charcoal-space-66: 96;
-  --charcoal-space-63: 80;
-  --charcoal-space-60: 64;
-  --charcoal-space-55: 48;
-  --charcoal-space-50: 40;
-  --charcoal-space-46: 32;
-  --charcoal-space-43: 28;
-  --charcoal-space-40: 24;
-  --charcoal-space-35: 20;
-  --charcoal-space-30: 16;
-  --charcoal-space-25: 12;
-  --charcoal-space-20: 8;
-  --charcoal-space-15: 6;
-  --charcoal-space-10: 4;
-  --charcoal-space-1: 2;
-  --charcoal-space-0: 0;
+  --charcoal-text-line-height-100: 72px;
+  --charcoal-text-line-height-90: 64px;
+  --charcoal-text-line-height-80: 56px;
+  --charcoal-text-line-height-70: 52px;
+  --charcoal-text-line-height-60: 44px;
+  --charcoal-text-line-height-50: 40px;
+  --charcoal-text-line-height-40: 36px;
+  --charcoal-text-line-height-30: 32px;
+  --charcoal-text-line-height-20: 28px;
+  --charcoal-text-line-height-10: 24px;
+  --charcoal-text-line-height-5: 20px;
+  --charcoal-text-line-height-1: 18px;
+  --charcoal-text-font-weight-70: 700px;
+  --charcoal-text-font-weight-40: 400px;
+  --charcoal-text-line-height-0: 16px;
+  --charcoal-text-font-size-120: 60px;
+  --charcoal-text-font-size-110: 50px;
+  --charcoal-text-font-size-100: 45px;
+  --charcoal-text-font-size-90: 40px;
+  --charcoal-text-font-size-80: 36px;
+  --charcoal-text-font-size-70: 32px;
+  --charcoal-text-font-size-60: 28px;
+  --charcoal-text-font-size-50: 25px;
+  --charcoal-text-font-size-40: 22px;
+  --charcoal-text-font-size-30: 20px;
+  --charcoal-text-font-size-20: 18px;
+  --charcoal-text-font-size-10: 16px;
+  --charcoal-text-font-size-5: 14px;
+  --charcoal-text-font-size-1: 12px;
+  --charcoal-text-font-size-0: 11px;
+  --charcoal-space-target-l: 48px;
+  --charcoal-space-target-m: 40px;
+  --charcoal-space-target-s: 32px;
+  --charcoal-space-target-xs: 24px;
+  --charcoal-space-999: 999999px;
+  --charcoal-space-100: 440px;
+  --charcoal-space-90: 272px;
+  --charcoal-space-80: 168px;
+  --charcoal-space-70: 104px;
+  --charcoal-space-66: 96px;
+  --charcoal-space-63: 80px;
+  --charcoal-space-60: 64px;
+  --charcoal-space-55: 48px;
+  --charcoal-space-50: 40px;
+  --charcoal-space-46: 32px;
+  --charcoal-space-43: 28px;
+  --charcoal-space-40: 24px;
+  --charcoal-space-35: 20px;
+  --charcoal-space-30: 16px;
+  --charcoal-space-25: 12px;
+  --charcoal-space-20: 8px;
+  --charcoal-space-15: 6px;
+  --charcoal-space-10: 4px;
+  --charcoal-space-1: 2px;
+  --charcoal-space-0: 0px;
   --charcoal-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
   --charcoal-color-container-subtle: rgba(31, 31, 31, 0.02);
   --charcoal-color-dark-magenta-90: rgba(253, 217, 233, 1);
@@ -345,11 +350,6 @@
   --charcoal-color-light-neutral-a-5: rgba(0, 0, 0, 0.047);
   --charcoal-color-light-neutral-a-0: rgba(0, 0, 0, 0);
   --charcoal-color-light-neutral-0: rgba(255, 255, 255, 1);
-  --charcoal-brand-color-factory: rgba(0, 184, 205, 1);
-  --charcoal-brand-color-booth: rgba(252, 77, 80, 1);
-  --charcoal-brand-color-comic: rgba(255, 196, 0, 1);
-  --charcoal-brand-color-premium: rgba(253, 158, 22, 1);
-  --charcoal-brand-color-pixiv: rgba(0, 150, 250, 1);
   --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
   --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
   --charcoal-radius-xxl: var(--charcoal-space-40);