Skip to content

Commit

Permalink
Merge pull request #605 from pixiv/theme/update/1721382816089
Browse files Browse the repository at this point in the history 
[theme]Update theme Fri Jul 19 2024
  • Loading branch information
@naporin0624
naporin0624 authored Jul 19, 2024
2 parents a13c826 + 0b1afd3 commit f346420
Show file tree
Hide file tree
Showing 5 changed files with 222 additions and 210 deletions.
139 changes: 71 additions & 68 deletions packages/theme/src/css/_variables_dark.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,68 @@
/**
* Do not edit directly
* Generated on Thu, 11 Jul 2024 10:03:50 GMT
* Generated on Fri, 19 Jul 2024 09:53:29 GMT
*/

:root[data-theme='dark'] {
--charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
--charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
--charcoal-color-container-subtle: rgba(228, 228, 228, 0.02);
--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-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);
Expand Down Expand Up @@ -265,62 +321,6 @@
--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-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-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);
Expand Down Expand Up @@ -356,21 +356,21 @@
--charcoal-color-text-on-on-img-hover: var(--charcoal-colors-dark-neutral-90);
--charcoal-color-text-on-on-img-default: var(--charcoal-colors-dark-neutral-90);
--charcoal-color-text-on-primary-default: var(--charcoal-colors-dark-neutral-90);
--charcoal-color-text-visited-press: var(--charcoal-colors-dark-purple-90);
--charcoal-color-text-visited-hover: var(--charcoal-colors-dark-purple-80);
--charcoal-color-text-visited-default: var(--charcoal-colors-dark-purple-60);
--charcoal-color-text-info-press: var(--charcoal-colors-dark-blue-90);
--charcoal-color-text-info-hover: var(--charcoal-colors-dark-blue-80);
--charcoal-color-text-info-default: var(--charcoal-colors-dark-blue-60);
--charcoal-color-text-notice-press: var(--charcoal-colors-dark-yellow-90);
--charcoal-color-text-notice-hover: var(--charcoal-colors-dark-yellow-80);
--charcoal-color-text-notice-default: var(--charcoal-colors-dark-yellow-60);
--charcoal-color-text-positive-press: var(--charcoal-colors-dark-green-90);
--charcoal-color-text-positive-hover: var(--charcoal-colors-dark-green-80);
--charcoal-color-text-positive-default: var(--charcoal-colors-dark-green-60);
--charcoal-color-text-notice-press: var(--charcoal-colors-dark-yellow-90);
--charcoal-color-text-notice-hover: var(--charcoal-colors-dark-yellow-80);
--charcoal-color-text-notice-default: var(--charcoal-colors-dark-yellow-60);
--charcoal-color-text-negative-press: var(--charcoal-colors-dark-red-90);
--charcoal-color-text-negative-hover: var(--charcoal-colors-dark-red-80);
--charcoal-color-text-negative-default: var(--charcoal-colors-dark-red-60);
--charcoal-color-text-visited-press: var(--charcoal-colors-dark-purple-90);
--charcoal-color-text-visited-hover: var(--charcoal-colors-dark-purple-80);
--charcoal-color-text-visited-default: var(--charcoal-colors-dark-purple-60);
--charcoal-color-text-info-press: var(--charcoal-colors-dark-blue-90);
--charcoal-color-text-info-hover: var(--charcoal-colors-dark-blue-80);
--charcoal-color-text-info-default: var(--charcoal-colors-dark-blue-60);
--charcoal-color-text-placeholder-press: var(--charcoal-colors-dark-neutral-50);
--charcoal-color-text-placeholder-hover: var(--charcoal-colors-dark-neutral-40);
--charcoal-color-text-placeholder-default: var(--charcoal-colors-dark-neutral-30);
Expand Down Expand Up @@ -422,14 +422,15 @@
--charcoal-color-container-tertiary-default: var(--charcoal-colors-dark-neutral-10);
--charcoal-color-container-secondary-default: var(--charcoal-colors-dark-neutral-5);
--charcoal-color-container-disable: var(--charcoal-colors-dark-neutral-10);
--charcoal-color-container-press-a: var(--charcoal-colors-dark-neutral-a-10);
--charcoal-color-container-hover-a: var(--charcoal-colors-dark-neutral-a-5);
--charcoal-color-container-default-a: var(--charcoal-colors-dark-neutral-a-0);
--charcoal-color-container-press: var(--charcoal-colors-dark-neutral-10);
--charcoal-color-container-hover: var(--charcoal-colors-dark-neutral-5);
--charcoal-color-container-default: var(--charcoal-colors-dark-neutral-0);
--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);
Expand Down Expand Up @@ -457,6 +458,8 @@
--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);
Expand Down
139 changes: 71 additions & 68 deletions packages/theme/src/css/_variables_light.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,68 @@
/**
* Do not edit directly
* Generated on Thu, 11 Jul 2024 10:03:49 GMT
* Generated on Fri, 19 Jul 2024 09:53:27 GMT
*/

:root[data-theme='light'], :root:not([data-theme]) {
--charcoal-color-text-brand-premium-press: rgba(213, 133, 18, 1);
--charcoal-color-text-brand-premium-hover: rgba(243, 152, 21, 1);
--charcoal-color-container-subtle: rgba(31, 31, 31, 0.02);
--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-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);
Expand Down Expand Up @@ -265,62 +321,6 @@
--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-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-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);
Expand Down Expand Up @@ -356,21 +356,21 @@
--charcoal-color-text-on-on-img-hover: var(--charcoal-colors-light-neutral-0);
--charcoal-color-text-on-on-img-default: var(--charcoal-colors-light-neutral-0);
--charcoal-color-text-on-primary-default: var(--charcoal-colors-light-neutral-0);
--charcoal-color-text-visited-press: var(--charcoal-colors-light-purple-90);
--charcoal-color-text-visited-hover: var(--charcoal-colors-light-purple-80);
--charcoal-color-text-visited-default: var(--charcoal-colors-light-purple-70);
--charcoal-color-text-info-press: var(--charcoal-colors-light-blue-80);
--charcoal-color-text-info-hover: var(--charcoal-colors-light-blue-70);
--charcoal-color-text-info-default: var(--charcoal-colors-light-blue-60);
--charcoal-color-text-notice-press: var(--charcoal-colors-light-yellow-80);
--charcoal-color-text-notice-hover: var(--charcoal-colors-light-yellow-70);
--charcoal-color-text-notice-default: var(--charcoal-colors-light-yellow-60);
--charcoal-color-text-positive-press: var(--charcoal-colors-light-green-80);
--charcoal-color-text-positive-hover: var(--charcoal-colors-light-green-70);
--charcoal-color-text-positive-default: var(--charcoal-colors-light-green-60);
--charcoal-color-text-notice-press: var(--charcoal-colors-light-yellow-80);
--charcoal-color-text-notice-hover: var(--charcoal-colors-light-yellow-70);
--charcoal-color-text-notice-default: var(--charcoal-colors-light-yellow-60);
--charcoal-color-text-negative-press: var(--charcoal-colors-light-red-80);
--charcoal-color-text-negative-hover: var(--charcoal-colors-light-red-70);
--charcoal-color-text-negative-default: var(--charcoal-colors-light-red-60);
--charcoal-color-text-visited-press: var(--charcoal-colors-light-purple-90);
--charcoal-color-text-visited-hover: var(--charcoal-colors-light-purple-80);
--charcoal-color-text-visited-default: var(--charcoal-colors-light-purple-70);
--charcoal-color-text-info-press: var(--charcoal-colors-light-blue-80);
--charcoal-color-text-info-hover: var(--charcoal-colors-light-blue-70);
--charcoal-color-text-info-default: var(--charcoal-colors-light-blue-60);
--charcoal-color-text-placeholder-press: var(--charcoal-colors-light-neutral-70);
--charcoal-color-text-placeholder-hover: var(--charcoal-colors-light-neutral-60);
--charcoal-color-text-placeholder-default: var(--charcoal-colors-light-neutral-50);
Expand Down Expand Up @@ -422,14 +422,15 @@
--charcoal-color-container-tertiary-default: var(--charcoal-colors-light-neutral-10);
--charcoal-color-container-secondary-default: var(--charcoal-colors-light-neutral-5);
--charcoal-color-container-disable: var(--charcoal-colors-light-neutral-10);
--charcoal-color-container-press-a: var(--charcoal-colors-light-neutral-a-10);
--charcoal-color-container-hover-a: var(--charcoal-colors-light-neutral-a-5);
--charcoal-color-container-default-a: var(--charcoal-colors-light-neutral-a-0);
--charcoal-color-container-press: var(--charcoal-colors-light-neutral-10);
--charcoal-color-container-hover: var(--charcoal-colors-light-neutral-5);
--charcoal-color-container-default: var(--charcoal-colors-light-neutral-0);
--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);
Expand Down Expand Up @@ -457,6 +458,8 @@
--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);
Expand Down
Loading

0 comments on commit f346420

Please sign in to comment.