Merge branch 'main' into v4.0.0

pixiv · Dec 13, 2024 · 233902f · 233902f
2 parents f08e2a9 + 99245ab
commit 233902f
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 275 deletions.
diff --git a/packages/theme/src/css/_variables_dark.css b/packages/theme/src/css/_variables_dark.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:28:06 GMT
+ * Generated on Thu, 10 Oct 2024 09:26:48 GMT
  */
 
 :root[data-theme='dark'] {
@@ -16,6 +16,37 @@
   --charcoal-paragraph-width-l: 672;
   --charcoal-paragraph-width-m: 448;
   --charcoal-paragraph-width-s: 320;
+  --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;
@@ -308,37 +339,6 @@
   --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-radius-xxl: var(--charcoal-space-40);
   --charcoal-radius-xl: var(--charcoal-space-30);
   --charcoal-radius-l: var(--charcoal-space-25);
@@ -348,6 +348,34 @@
   --charcoal-radius-0: var(--charcoal-space-0);
   --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
   --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
+  --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
+  --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
+  --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
+  --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
+  --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
+  --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
+  --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
+  --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
+  --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
+  --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
+  --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
+  --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
+  --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
+  --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
+  --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
+  --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
+  --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
+  --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
+  --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
+  --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
+  --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
+  --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
+  --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
+  --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
+  --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
+  --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
+  --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
+  --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
   --charcoal-space-layout-100: var(--charcoal-space-100);
   --charcoal-space-layout-90: var(--charcoal-space-90);
   --charcoal-space-layout-80: var(--charcoal-space-80);
@@ -470,34 +498,6 @@
   --charcoal-color-background-default: var(--charcoal-color-dark-neutral-0);
   --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
   --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
-  --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
-  --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
-  --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
-  --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
-  --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
-  --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
-  --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
-  --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
-  --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
-  --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
-  --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
-  --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
-  --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
-  --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
-  --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
-  --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
-  --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
-  --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
-  --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
-  --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
-  --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
-  --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
-  --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
-  --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
-  --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
-  --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
-  --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
-  --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
   --charcoal-space-between-checkboxes-horizontal: var(--charcoal-space-layout-25);
   --charcoal-space-between-checkboxes-vertical: var(--charcoal-space-layout-0);
   --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);

diff --git a/packages/theme/src/css/_variables_light.css b/packages/theme/src/css/_variables_light.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 07:28:05 GMT
+ * Generated on Thu, 10 Oct 2024 09:26:47 GMT
  */
 
 :root[data-theme='light'], :root:not([data-theme]) {
@@ -16,6 +16,37 @@
   --charcoal-paragraph-width-l: 672;
   --charcoal-paragraph-width-m: 448;
   --charcoal-paragraph-width-s: 320;
+  --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;
@@ -308,37 +339,6 @@
   --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-radius-xxl: var(--charcoal-space-40);
   --charcoal-radius-xl: var(--charcoal-space-30);
   --charcoal-radius-l: var(--charcoal-space-25);
@@ -348,6 +348,34 @@
   --charcoal-radius-0: var(--charcoal-space-0);
   --charcoal-border-width-focus-2: var(--charcoal-border-width-l);
   --charcoal-border-width-focus-1: var(--charcoal-border-width-m);
+  --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
+  --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
+  --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
+  --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
+  --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
+  --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
+  --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
+  --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
+  --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
+  --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
+  --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
+  --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
+  --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
+  --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
+  --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
+  --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
+  --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
+  --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
+  --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
+  --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
+  --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
+  --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
+  --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
+  --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
+  --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
+  --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
+  --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
+  --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
   --charcoal-space-layout-100: var(--charcoal-space-100);
   --charcoal-space-layout-90: var(--charcoal-space-90);
   --charcoal-space-layout-80: var(--charcoal-space-80);
@@ -470,34 +498,6 @@
   --charcoal-color-background-default: var(--charcoal-color-light-neutral-0);
   --charcoal-color-dark-neutral-a-90: var(--charcoal-color-dark-neutral-90);
   --charcoal-color-light-neutral-a-90: var(--charcoal-color-light-neutral-90);
-  --charcoal-text-font-weight-bold: var(--charcoal-text-font-weight-70);
-  --charcoal-text-font-weight-regular: var(--charcoal-text-font-weight-40);
-  --charcoal-text-font-size-caption-s: var(--charcoal-text-font-size-1);
-  --charcoal-text-font-size-caption-m: var(--charcoal-text-font-size-5);
-  --charcoal-text-font-size-heading-xxxs: var(--charcoal-text-font-size-5);
-  --charcoal-text-font-size-heading-xxs: var(--charcoal-text-font-size-20);
-  --charcoal-text-font-size-heading-xs: var(--charcoal-text-font-size-30);
-  --charcoal-text-font-size-heading-s: var(--charcoal-text-font-size-40);
-  --charcoal-text-font-size-heading-m: var(--charcoal-text-font-size-50);
-  --charcoal-text-font-size-heading-l: var(--charcoal-text-font-size-60);
-  --charcoal-text-font-size-heading-xl: var(--charcoal-text-font-size-70);
-  --charcoal-text-font-size-heading-xxl: var(--charcoal-text-font-size-80);
-  --charcoal-text-font-size-heading-xxxl: var(--charcoal-text-font-size-90);
-  --charcoal-text-font-size-body: var(--charcoal-text-font-size-10);
-  --charcoal-text-line-height-caption-s: var(--charcoal-text-line-height-1);
-  --charcoal-text-line-height-caption-m: var(--charcoal-text-line-height-5);
-  --charcoal-text-line-height-heading-xxxs: var(--charcoal-text-line-height-5);
-  --charcoal-text-line-height-heading-xxs: var(--charcoal-text-line-height-10);
-  --charcoal-text-line-height-heading-xs: var(--charcoal-text-line-height-20);
-  --charcoal-text-line-height-heading-s: var(--charcoal-text-line-height-20);
-  --charcoal-text-line-height-heading-m: var(--charcoal-text-line-height-30);
-  --charcoal-text-line-height-heading-l: var(--charcoal-text-line-height-40);
-  --charcoal-text-line-height-heading-xl: var(--charcoal-text-line-height-50);
-  --charcoal-text-line-height-heading-xxl: var(--charcoal-text-line-height-60);
-  --charcoal-text-line-height-heading-xxxl: var(--charcoal-text-line-height-70);
-  --charcoal-text-line-height-body: var(--charcoal-text-line-height-10);
-  --charcoal-text-line-height-paragraph: var(--charcoal-text-line-height-20);
-  --charcoal-text-font-size-paragraph: var(--charcoal-text-font-size-10);
   --charcoal-space-between-checkboxes-horizontal: var(--charcoal-space-layout-25);
   --charcoal-space-between-checkboxes-vertical: var(--charcoal-space-layout-0);
   --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);

diff --git a/packages/theme/src/json/base.json b/packages/theme/src/json/base.json
@@ -1,37 +1,4 @@
 {
-  "text": {
-    "font-size/0": { "value": "11" },
-    "font-size/1": { "value": "12" },
-    "font-size/5": { "value": "14" },
-    "font-size/10": { "value": "16" },
-    "font-size/20": { "value": "18" },
-    "font-size/30": { "value": "20" },
-    "font-size/40": { "value": "22" },
-    "font-size/50": { "value": "25" },
-    "font-size/60": { "value": "28" },
-    "font-size/70": { "value": "32" },
-    "font-size/80": { "value": "36" },
-    "font-size/90": { "value": "40" },
-    "font-size/100": { "value": "45" },
-    "font-size/110": { "value": "50" },
-    "font-size/120": { "value": "60" },
-    "line-height/0": { "value": "16" },
-    "font-weight/40": { "value": "400" },
-    "font-weight/70": { "value": "700" },
-    "line-height/1": { "value": "18" },
-    "line-height/5": { "value": "20" },
-    "line-height/10": { "value": "24" },
-    "line-height/20": { "value": "28" },
-    "line-height/30": { "value": "32" },
-    "line-height/40": { "value": "36" },
-    "line-height/50": { "value": "40" },
-    "line-height/60": { "value": "44" },
-    "line-height/70": { "value": "52" },
-    "line-height/80": { "value": "56" },
-    "line-height/90": { "value": "64" },
-    "line-height/100": { "value": "72" },
-    "font-family/sans": { "value": "Sarasa UI J" }
-  },
   "brand-color": {
     "pixiv": { "value": "rgba(0, 150, 250, 1)" },
     "premium": { "value": "rgba(253, 158, 22, 1)" },