Merge pull request #606 from pixiv/theme/update/1721388992545

pixiv · Jul 19, 2024 · 963d84d · 963d84d
2 parents f346420 + 8f641ba
commit 963d84d
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 149 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 Fri, 19 Jul 2024 09:53:29 GMT
+ * Generated on Fri, 19 Jul 2024 11:36:25 GMT
  */
 
 :root[data-theme='dark'] {
@@ -38,31 +38,6 @@
   --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-colors-dark-magenta-90: rgba(253, 217, 233, 1);
   --charcoal-colors-dark-magenta-80: rgba(247, 184, 213, 1);
   --charcoal-colors-dark-magenta-70: rgba(243, 163, 200, 1);
@@ -321,14 +296,40 @@
   --charcoal-colors-light-neutral-a-5: rgba(31, 31, 31, 0.055);
   --charcoal-colors-light-neutral-a-0: rgba(31, 31, 31, 0);
   --charcoal-colors-light-neutral-0: rgba(255, 255, 255, 1);
+  --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-brand-color-f-a-c-t-o-r-y: rgba(0, 184, 205, 1);
   --charcoal-brand-color-b-o-o-t-h: 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-color-border-negative: var(--charcoal-colors-dark-red-20);
-  --charcoal-color-border-focus: var(--charcoal-colors-dark-blue-20);
+  --charcoal-color-border-focus-2: var(--charcoal-colors-dark-blue-20);
   --charcoal-color-border-disable: var(--charcoal-colors-dark-neutral-a-5);
+  --charcoal-color-border-focus-1: var(--charcoal-colors-dark-blue-60);
   --charcoal-color-border-secondary: var(--charcoal-colors-dark-neutral-a-10);
   --charcoal-color-border-default: var(--charcoal-colors-dark-neutral-30);
   --charcoal-color-icon-on-neutral-press: var(--charcoal-colors-dark-neutral-90);
@@ -431,6 +432,8 @@
   --charcoal-color-background-tertiary: var(--charcoal-colors-dark-neutral--10);
   --charcoal-color-background-secondary: var(--charcoal-colors-dark-neutral--5);
   --charcoal-color-background-default: var(--charcoal-colors-dark-neutral-0);
+  --charcoal-colors-dark-neutral-a-90: var(--charcoal-colors-dark-neutral-90);
+  --charcoal-colors-light-neutral-a-90: var(--charcoal-colors-light-neutral-90);
   --charcoal-space-layout-100: var(--charcoal-space-100);
   --charcoal-space-layout-90: var(--charcoal-space-90);
   --charcoal-space-layout-80: var(--charcoal-space-80);
@@ -458,8 +461,6 @@
   --charcoal-space-component-10: var(--charcoal-space-10);
   --charcoal-space-component-1: var(--charcoal-space-1);
   --charcoal-space-component-0: var(--charcoal-space-0);
-  --charcoal-colors-dark-neutral-a-90: var(--charcoal-colors-dark-neutral-90);
-  --charcoal-colors-light-neutral-a-90: var(--charcoal-colors-light-neutral-90);
   --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
   --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
   --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-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 Fri, 19 Jul 2024 09:53:27 GMT
+ * Generated on Fri, 19 Jul 2024 11:36:24 GMT
  */
 
 :root[data-theme='light'], :root:not([data-theme]) {
@@ -38,31 +38,6 @@
   --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-colors-dark-magenta-90: rgba(253, 217, 233, 1);
   --charcoal-colors-dark-magenta-80: rgba(247, 184, 213, 1);
   --charcoal-colors-dark-magenta-70: rgba(243, 163, 200, 1);
@@ -321,14 +296,40 @@
   --charcoal-colors-light-neutral-a-5: rgba(31, 31, 31, 0.055);
   --charcoal-colors-light-neutral-a-0: rgba(31, 31, 31, 0);
   --charcoal-colors-light-neutral-0: rgba(255, 255, 255, 1);
+  --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-brand-color-f-a-c-t-o-r-y: rgba(0, 184, 205, 1);
   --charcoal-brand-color-b-o-o-t-h: 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-color-border-negative: var(--charcoal-colors-light-red-20);
-  --charcoal-color-border-focus: var(--charcoal-colors-light-blue-20);
+  --charcoal-color-border-focus-2: var(--charcoal-colors-light-blue-20);
   --charcoal-color-border-disable: var(--charcoal-colors-light-neutral-a-10);
+  --charcoal-color-border-focus-1: var(--charcoal-colors-light-blue-60);
   --charcoal-color-border-secondary: var(--charcoal-colors-light-neutral-a-10);
   --charcoal-color-border-default: var(--charcoal-colors-light-neutral-a-50);
   --charcoal-color-icon-on-neutral-press: var(--charcoal-colors-light-neutral-10);
@@ -431,6 +432,8 @@
   --charcoal-color-background-tertiary: var(--charcoal-colors-light-neutral-10);
   --charcoal-color-background-secondary: var(--charcoal-colors-light-neutral-5);
   --charcoal-color-background-default: var(--charcoal-colors-light-neutral-0);
+  --charcoal-colors-dark-neutral-a-90: var(--charcoal-colors-dark-neutral-90);
+  --charcoal-colors-light-neutral-a-90: var(--charcoal-colors-light-neutral-90);
   --charcoal-space-layout-100: var(--charcoal-space-100);
   --charcoal-space-layout-90: var(--charcoal-space-90);
   --charcoal-space-layout-80: var(--charcoal-space-80);
@@ -458,8 +461,6 @@
   --charcoal-space-component-10: var(--charcoal-space-10);
   --charcoal-space-component-1: var(--charcoal-space-1);
   --charcoal-space-component-0: var(--charcoal-space-0);
-  --charcoal-colors-dark-neutral-a-90: var(--charcoal-colors-dark-neutral-90);
-  --charcoal-colors-light-neutral-a-90: var(--charcoal-colors-light-neutral-90);
   --charcoal-color-icon-on-positive-press: var(--charcoal-color-text-on-positive-press);
   --charcoal-color-icon-on-positive-hover: var(--charcoal-color-text-on-positive-hover);
   --charcoal-color-icon-on-notice-press: var(--charcoal-color-text-on-notice-press);

diff --git a/packages/theme/src/json/base.json b/packages/theme/src/json/base.json
@@ -6,6 +6,29 @@
     "BOOTH": { "value": "rgba(252, 77, 80, 1)" },
     "FACTORY": { "value": "rgba(0, 184, 205, 1)" }
   },
+  "Space": {
+    "0": { "value": "0" },
+    "1": { "value": "2" },
+    "10": { "value": "4" },
+    "15": { "value": "6" },
+    "20": { "value": "8" },
+    "25": { "value": "12" },
+    "30": { "value": "16" },
+    "35": { "value": "20" },
+    "40": { "value": "24" },
+    "43": { "value": "28" },
+    "46": { "value": "32" },
+    "50": { "value": "40" },
+    "55": { "value": "48" },
+    "60": { "value": "64" },
+    "63": { "value": "80" },
+    "66": { "value": "96" },
+    "70": { "value": "104" },
+    "80": { "value": "168" },
+    "90": { "value": "272" },
+    "100": { "value": "440" },
+    "999": { "value": "999999" }
+  },
   "Colors": {
     "Light/Neutral/0": { "value": "rgba(255, 255, 255, 1)" },
     "Light/NeutralA/0": { "value": "rgba(31, 31, 31, 0)" },
@@ -268,29 +291,6 @@
     "Dark/Magenta/80": { "value": "rgba(247, 184, 213, 1)" },
     "Dark/Magenta/90": { "value": "rgba(253, 217, 233, 1)" }
   },
-  "Space": {
-    "0": { "value": "0" },
-    "1": { "value": "2" },
-    "10": { "value": "4" },
-    "15": { "value": "6" },
-    "20": { "value": "8" },
-    "25": { "value": "12" },
-    "30": { "value": "16" },
-    "35": { "value": "20" },
-    "40": { "value": "24" },
-    "43": { "value": "28" },
-    "46": { "value": "32" },
-    "50": { "value": "40" },
-    "55": { "value": "48" },
-    "60": { "value": "64" },
-    "63": { "value": "80" },
-    "66": { "value": "96" },
-    "70": { "value": "104" },
-    "80": { "value": "168" },
-    "90": { "value": "272" },
-    "100": { "value": "440" },
-    "999": { "value": "999999" }
-  },
   "Text": {
     "font-size/0": { "value": "11" },
     "font-size/1": { "value": "12" },

diff --git a/packages/theme/src/json/pixiv-dark.json b/packages/theme/src/json/pixiv-dark.json
@@ -1,4 +1,37 @@
 {
+  "Space": {
+    "target/xs": { "value": "24" },
+    "target/s": { "value": "32" },
+    "target/m": { "value": "40" },
+    "target/l": { "value": "48" },
+    "component/0": { "value": "{Space.0}" },
+    "component/1": { "value": "{Space.1}" },
+    "component/10": { "value": "{Space.10}" },
+    "component/15": { "value": "{Space.15}" },
+    "component/20": { "value": "{Space.20}" },
+    "component/25": { "value": "{Space.25}" },
+    "component/30": { "value": "{Space.30}" },
+    "component/35": { "value": "{Space.35}" },
+    "component/40": { "value": "{Space.40}" },
+    "component/43": { "value": "{Space.43}" },
+    "component/46": { "value": "{Space.46}" },
+    "component/50": { "value": "{Space.50}" },
+    "component/55": { "value": "{Space.55}" },
+    "component/60": { "value": "{Space.60}" },
+    "component/63": { "value": "{Space.63}" },
+    "component/66": { "value": "{Space.66}" },
+    "layout/0": { "value": "{Space.0}" },
+    "layout/10": { "value": "{Space.10}" },
+    "layout/20": { "value": "{Space.20}" },
+    "layout/30": { "value": "{Space.30}" },
+    "layout/40": { "value": "{Space.40}" },
+    "layout/50": { "value": "{Space.50}" },
+    "layout/60": { "value": "{Space.60}" },
+    "layout/70": { "value": "{Space.70}" },
+    "layout/80": { "value": "{Space.80}" },
+    "layout/90": { "value": "{Space.90}" },
+    "layout/100": { "value": "{Space.100}" }
+  },
   "Color": {
     "background/default": { "value": "{Colors.Dark/Neutral/0}" },
     "background/secondary": { "value": "{Colors.Dark/Neutral/-5}" },
@@ -130,8 +163,9 @@
     "icon/on-neutral/press": { "value": "{Colors.Dark/Neutral/90}" },
     "border/default": { "value": "{Colors.Dark/Neutral/30}" },
     "border/secondary": { "value": "{Colors.Dark/NeutralA/10}" },
+    "border/focus/1": { "value": "{Colors.Dark/Blue/60}" },
     "border/disable": { "value": "{Colors.Dark/NeutralA/5}" },
-    "border/focus": { "value": "{Colors.Dark/Blue/20}" },
+    "border/focus/2": { "value": "{Colors.Dark/Blue/20}" },
     "border/negative": { "value": "{Colors.Dark/Red/20}" },
     "icon/on-negative/default": { "value": "{Color.text/on-negative/default}" },
     "icon/on-negative/hover": { "value": "{Color.text/on-negative/hover}" },
@@ -142,38 +176,5 @@
     "icon/on-notice/press": { "value": "{Color.text/on-notice/press}" },
     "icon/on-positive/hover": { "value": "{Color.text/on-positive/hover}" },
     "icon/on-positive/press": { "value": "{Color.text/on-positive/press}" }
-  },
-  "Space": {
-    "target/xs": { "value": "24" },
-    "target/s": { "value": "32" },
-    "target/m": { "value": "40" },
-    "target/l": { "value": "48" },
-    "component/0": { "value": "{Space.0}" },
-    "component/1": { "value": "{Space.1}" },
-    "component/10": { "value": "{Space.10}" },
-    "component/15": { "value": "{Space.15}" },
-    "component/20": { "value": "{Space.20}" },
-    "component/25": { "value": "{Space.25}" },
-    "component/30": { "value": "{Space.30}" },
-    "component/35": { "value": "{Space.35}" },
-    "component/40": { "value": "{Space.40}" },
-    "component/43": { "value": "{Space.43}" },
-    "component/46": { "value": "{Space.46}" },
-    "component/50": { "value": "{Space.50}" },
-    "component/55": { "value": "{Space.55}" },
-    "component/60": { "value": "{Space.60}" },
-    "component/63": { "value": "{Space.63}" },
-    "component/66": { "value": "{Space.66}" },
-    "layout/0": { "value": "{Space.0}" },
-    "layout/10": { "value": "{Space.10}" },
-    "layout/20": { "value": "{Space.20}" },
-    "layout/30": { "value": "{Space.30}" },
-    "layout/40": { "value": "{Space.40}" },
-    "layout/50": { "value": "{Space.50}" },
-    "layout/60": { "value": "{Space.60}" },
-    "layout/70": { "value": "{Space.70}" },
-    "layout/80": { "value": "{Space.80}" },
-    "layout/90": { "value": "{Space.90}" },
-    "layout/100": { "value": "{Space.100}" }
   }
 }