Skip to content

Commit

Permalink
Merge pull request #633 from pixiv/theme/update/1728552414947
Browse files Browse the repository at this point in the history 
[theme]Update theme Thu Oct 10 2024
  • Loading branch information
@mimokmt
mimokmt authored Oct 16, 2024
2 parents 029ef5f + 3314234 commit 469390f
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 167 deletions.
103 changes: 68 additions & 35 deletions packages/theme/src/css/_variables_dark.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
/**
* Do not edit directly
* Generated on Fri, 26 Jul 2024 05:09:39 GMT
* Generated on Thu, 10 Oct 2024 09:26:48 GMT
*/

:root[data-theme='dark'] {
--charcoal-radius-oval: 999999;
--charcoal-border-width-l: 2;
--charcoal-border-width-m: 1;
--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-text-font-family-sans: Sarasa UI J;
--charcoal-text-line-height-100: 72;
--charcoal-text-line-height-90: 64;
Expand Down Expand Up @@ -61,11 +72,7 @@
--charcoal-space-10: 4;
--charcoal-space-1: 2;
--charcoal-space-0: 0;
--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-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
--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);
Expand Down Expand Up @@ -327,6 +334,48 @@
--charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
--charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 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-radius-xxl: var(--charcoal-space-40);
--charcoal-radius-xl: var(--charcoal-space-30);
--charcoal-radius-l: var(--charcoal-space-25);
--charcoal-radius-m: var(--charcoal-space-20);
--charcoal-radius-s: var(--charcoal-space-10);
--charcoal-radius-xs: var(--charcoal-space-1);
--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);
Expand All @@ -335,31 +384,18 @@
--charcoal-space-layout-50: var(--charcoal-space-50);
--charcoal-space-layout-40: var(--charcoal-space-40);
--charcoal-space-layout-30: var(--charcoal-space-30);
--charcoal-space-layout-25: var(--charcoal-space-25);
--charcoal-space-layout-20: var(--charcoal-space-20);
--charcoal-space-layout-10: var(--charcoal-space-10);
--charcoal-space-layout-0: var(--charcoal-space-0);
--charcoal-space-component-66: var(--charcoal-space-66);
--charcoal-space-component-63: var(--charcoal-space-63);
--charcoal-space-component-60: var(--charcoal-space-60);
--charcoal-space-component-55: var(--charcoal-space-55);
--charcoal-space-component-50: var(--charcoal-space-50);
--charcoal-space-component-46: var(--charcoal-space-46);
--charcoal-space-component-43: var(--charcoal-space-43);
--charcoal-space-component-40: var(--charcoal-space-40);
--charcoal-space-component-35: var(--charcoal-space-35);
--charcoal-space-component-30: var(--charcoal-space-30);
--charcoal-space-component-25: var(--charcoal-space-25);
--charcoal-space-component-20: var(--charcoal-space-20);
--charcoal-space-component-15: var(--charcoal-space-15);
--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-color-border-negative: var(--charcoal-color-dark-red-20);
--charcoal-color-border-focus-2: var(--charcoal-color-dark-blue-20);
--charcoal-color-border-disable: var(--charcoal-color-dark-neutral-a-5);
--charcoal-color-border-focus-1: var(--charcoal-color-dark-blue-60);
--charcoal-color-border-secondary: var(--charcoal-color-dark-neutral-a-10);
--charcoal-color-border-default: var(--charcoal-color-dark-neutral-30);
--charcoal-color-border-press: var(--charcoal-color-dark-neutral-a-50);
--charcoal-color-border-hover: var(--charcoal-color-dark-neutral-a-40);
--charcoal-color-border-default: var(--charcoal-color-dark-neutral-a-30);
--charcoal-color-icon-on-neutral-press: var(--charcoal-color-dark-neutral-90);
--charcoal-color-icon-on-neutral-hover: var(--charcoal-color-dark-neutral-90);
--charcoal-color-icon-on-neutral-default: var(--charcoal-color-dark-neutral-90);
Expand Down Expand Up @@ -400,8 +436,8 @@
--charcoal-color-text-info-press: var(--charcoal-color-dark-blue-90);
--charcoal-color-text-info-hover: var(--charcoal-color-dark-blue-80);
--charcoal-color-text-info-default: var(--charcoal-color-dark-blue-60);
--charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-50);
--charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-40);
--charcoal-color-text-placeholder-press: var(--charcoal-color-dark-neutral-30);
--charcoal-color-text-placeholder-hover: var(--charcoal-color-dark-neutral-30);
--charcoal-color-text-placeholder-default: var(--charcoal-color-dark-neutral-30);
--charcoal-color-text-tertiary-press: var(--charcoal-color-dark-neutral-70);
--charcoal-color-text-tertiary-hover: var(--charcoal-color-dark-neutral-60);
Expand All @@ -414,9 +450,9 @@
--charcoal-color-text-hover: var(--charcoal-color-dark-neutral-80);
--charcoal-color-text-default: var(--charcoal-color-dark-neutral-90);
--charcoal-color-container-skeleton: var(--charcoal-color-dark-neutral-a-5);
--charcoal-color-container-hud-press: var(--charcoal-color-light-neutral-20);
--charcoal-color-container-hud-hover: var(--charcoal-color-light-neutral-20);
--charcoal-color-container-hud-default: var(--charcoal-color-light-neutral-10);
--charcoal-color-container-hud-press: var(--charcoal-color-dark-neutral-70);
--charcoal-color-container-hud-hover: var(--charcoal-color-dark-neutral-80);
--charcoal-color-container-hud-default: var(--charcoal-color-dark-neutral-90);
--charcoal-color-container-neutral-press: var(--charcoal-color-dark-neutral-50);
--charcoal-color-container-neutral-hover: var(--charcoal-color-dark-neutral-40);
--charcoal-color-container-discovery-press: var(--charcoal-color-dark-red-50);
Expand Down Expand Up @@ -462,13 +498,8 @@
--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-radius-xxl: var(--charcoal-space-component-40);
--charcoal-radius-xl: var(--charcoal-space-component-30);
--charcoal-radius-l: var(--charcoal-space-component-25);
--charcoal-radius-m: var(--charcoal-space-component-20);
--charcoal-radius-s: var(--charcoal-space-component-10);
--charcoal-radius-xs: var(--charcoal-space-component-1);
--charcoal-radius-none: var(--charcoal-space-component-0);
--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);
--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 All @@ -478,6 +509,8 @@
--charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press);
--charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover);
--charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default);
--charcoal-color-border-hud: var(--charcoal-color-background-default);
--charcoal-color-border-selected: var(--charcoal-color-container-primary-default);
--charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press);
--charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover);
--charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default);
Expand Down
95 changes: 64 additions & 31 deletions packages/theme/src/css/_variables_light.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
/**
* Do not edit directly
* Generated on Fri, 26 Jul 2024 05:09:38 GMT
* Generated on Thu, 10 Oct 2024 09:26:47 GMT
*/

:root[data-theme='light'], :root:not([data-theme]) {
--charcoal-radius-oval: 999999;
--charcoal-border-width-l: 2;
--charcoal-border-width-m: 1;
--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-text-font-family-sans: Sarasa UI J;
--charcoal-text-line-height-100: 72;
--charcoal-text-line-height-90: 64;
Expand Down Expand Up @@ -61,11 +72,7 @@
--charcoal-space-10: 4;
--charcoal-space-1: 2;
--charcoal-space-0: 0;
--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-color-border-focus-legacy: rgba(0, 150, 250, 0.32);
--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);
Expand Down Expand Up @@ -327,6 +334,48 @@
--charcoal-color-light-neutral-a-5: rgba(31, 31, 31, 0.055);
--charcoal-color-light-neutral-a-0: rgba(31, 31, 31, 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-radius-xxl: var(--charcoal-space-40);
--charcoal-radius-xl: var(--charcoal-space-30);
--charcoal-radius-l: var(--charcoal-space-25);
--charcoal-radius-m: var(--charcoal-space-20);
--charcoal-radius-s: var(--charcoal-space-10);
--charcoal-radius-xs: var(--charcoal-space-1);
--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);
Expand All @@ -335,30 +384,17 @@
--charcoal-space-layout-50: var(--charcoal-space-50);
--charcoal-space-layout-40: var(--charcoal-space-40);
--charcoal-space-layout-30: var(--charcoal-space-30);
--charcoal-space-layout-25: var(--charcoal-space-25);
--charcoal-space-layout-20: var(--charcoal-space-20);
--charcoal-space-layout-10: var(--charcoal-space-10);
--charcoal-space-layout-0: var(--charcoal-space-0);
--charcoal-space-component-66: var(--charcoal-space-66);
--charcoal-space-component-63: var(--charcoal-space-63);
--charcoal-space-component-60: var(--charcoal-space-60);
--charcoal-space-component-55: var(--charcoal-space-55);
--charcoal-space-component-50: var(--charcoal-space-50);
--charcoal-space-component-46: var(--charcoal-space-46);
--charcoal-space-component-43: var(--charcoal-space-43);
--charcoal-space-component-40: var(--charcoal-space-40);
--charcoal-space-component-35: var(--charcoal-space-35);
--charcoal-space-component-30: var(--charcoal-space-30);
--charcoal-space-component-25: var(--charcoal-space-25);
--charcoal-space-component-20: var(--charcoal-space-20);
--charcoal-space-component-15: var(--charcoal-space-15);
--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-color-border-negative: var(--charcoal-color-light-red-20);
--charcoal-color-border-focus-2: var(--charcoal-color-light-blue-20);
--charcoal-color-border-disable: var(--charcoal-color-light-neutral-a-10);
--charcoal-color-border-focus-1: var(--charcoal-color-light-blue-60);
--charcoal-color-border-secondary: var(--charcoal-color-light-neutral-a-10);
--charcoal-color-border-press: var(--charcoal-color-light-neutral-a-70);
--charcoal-color-border-hover: var(--charcoal-color-light-neutral-a-60);
--charcoal-color-border-default: var(--charcoal-color-light-neutral-a-50);
--charcoal-color-icon-on-neutral-press: var(--charcoal-color-light-neutral-10);
--charcoal-color-icon-on-neutral-hover: var(--charcoal-color-light-neutral-5);
Expand Down Expand Up @@ -400,8 +436,8 @@
--charcoal-color-text-info-press: var(--charcoal-color-light-blue-80);
--charcoal-color-text-info-hover: var(--charcoal-color-light-blue-70);
--charcoal-color-text-info-default: var(--charcoal-color-light-blue-60);
--charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-70);
--charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-60);
--charcoal-color-text-placeholder-press: var(--charcoal-color-light-neutral-50);
--charcoal-color-text-placeholder-hover: var(--charcoal-color-light-neutral-50);
--charcoal-color-text-placeholder-default: var(--charcoal-color-light-neutral-50);
--charcoal-color-text-tertiary-press: var(--charcoal-color-light-neutral-80);
--charcoal-color-text-tertiary-hover: var(--charcoal-color-light-neutral-70);
Expand Down Expand Up @@ -462,13 +498,8 @@
--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-radius-xxl: var(--charcoal-space-component-40);
--charcoal-radius-xl: var(--charcoal-space-component-30);
--charcoal-radius-l: var(--charcoal-space-component-25);
--charcoal-radius-m: var(--charcoal-space-component-20);
--charcoal-radius-s: var(--charcoal-space-component-10);
--charcoal-radius-xs: var(--charcoal-space-component-1);
--charcoal-radius-none: var(--charcoal-space-component-0);
--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);
--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 All @@ -478,6 +509,8 @@
--charcoal-color-icon-on-negative-press: var(--charcoal-color-text-on-negative-press);
--charcoal-color-icon-on-negative-hover: var(--charcoal-color-text-on-negative-hover);
--charcoal-color-icon-on-negative-default: var(--charcoal-color-text-on-negative-default);
--charcoal-color-border-hud: var(--charcoal-color-background-default);
--charcoal-color-border-selected: var(--charcoal-color-container-primary-default);
--charcoal-color-icon-on-on-img-press: var(--charcoal-color-text-on-on-img-press);
--charcoal-color-icon-on-on-img-hover: var(--charcoal-color-text-on-on-img-hover);
--charcoal-color-icon-on-on-img-default: var(--charcoal-color-text-on-on-img-default);
Expand Down
Loading

0 comments on commit 469390f

Please sign in to comment.