diff --git a/apps/pink/public/prismjs.css b/apps/pink/public/prismjs.css
index 0657fce051..8b586eead8 100644
--- a/apps/pink/public/prismjs.css
+++ b/apps/pink/public/prismjs.css
@@ -194,7 +194,7 @@ OVERRIDE
.box {
- --p-box-background-color: var(--color-neutral-400) !important;
+ --p-box-background-color: var(--color-neutral-100) !important;
}
body.theme-light .box {
diff --git a/apps/pink/src/components/CodeEditor.svelte b/apps/pink/src/components/CodeEditor.svelte
index d266725341..a77cde9359 100644
--- a/apps/pink/src/components/CodeEditor.svelte
+++ b/apps/pink/src/components/CodeEditor.svelte
@@ -75,10 +75,10 @@
}
.cm-selectionBackground {
- background: hsl(var(--color-neutral-100)) !important;
+ background: hsl(var(--color-neutral-60)) !important;
body.theme-light & {
- background: hsl(var(--color-neutral-50)) !important;
+ background: hsl(var(--color-neutral-20)) !important;
}
}
diff --git a/apps/pink/src/components/IconsGrid.astro b/apps/pink/src/components/IconsGrid.astro
index b99198a984..5f3fe2455f 100644
--- a/apps/pink/src/components/IconsGrid.astro
+++ b/apps/pink/src/components/IconsGrid.astro
@@ -74,11 +74,11 @@ const removePublic = (path: string) => path.replace("/public", "");
.copy-overlay {
--bg-clr: hsl(var(--color-neutral-10) / 90%);
- --clr: hsl(var(--color-neutral-150));
+ --clr: hsl(var(--color-neutral-80));
}
:global(.theme-dark) .copy-overlay {
- --bg-clr: hsl(var(--color-neutral-500) / 90%);
+ --bg-clr: hsl(var(--color-neutral-105) / 90%);
--clr: white;
}
diff --git a/apps/pink/src/components/JoinCommunity.svelte b/apps/pink/src/components/JoinCommunity.svelte
index 48af5a0921..4796dcaac6 100644
--- a/apps/pink/src/components/JoinCommunity.svelte
+++ b/apps/pink/src/components/JoinCommunity.svelte
@@ -143,7 +143,7 @@
}
.user-profile-info {
- color: hsl(var(--color-neutral-100));
+ color: hsl(var(--color-neutral-60));
:global(.theme-dark) & {
color: hsl(var(--color-neutral-0));
diff --git a/apps/pink/src/components/Search.svelte b/apps/pink/src/components/Search.svelte
index 0b53ddb2e8..ff4b37e8ae 100644
--- a/apps/pink/src/components/Search.svelte
+++ b/apps/pink/src/components/Search.svelte
@@ -211,7 +211,7 @@
&:hover,
&.selected {
- background-color: hsl(var(--color-neutral-200));
+ background-color: hsl(var(--color-neutral-85));
:global(.theme-light) & {
background-color: hsl(var(--color-neutral-10));
diff --git a/apps/pink/src/components/homepage/TryItOut.svelte b/apps/pink/src/components/homepage/TryItOut.svelte
index 91f6f390e7..6315ff9b8a 100644
--- a/apps/pink/src/components/homepage/TryItOut.svelte
+++ b/apps/pink/src/components/homepage/TryItOut.svelte
@@ -232,7 +232,7 @@
}
:global(#{$theme-dark}) & {
- --p-card-bg-color-default: var(--color-neutral-400);
+ --p-card-bg-color-default: var(--color-neutral-100);
}
}
diff --git a/apps/pink/src/layouts/Layout.astro b/apps/pink/src/layouts/Layout.astro
index 0320fadf7c..9ee8de82c2 100644
--- a/apps/pink/src/layouts/Layout.astro
+++ b/apps/pink/src/layouts/Layout.astro
@@ -212,11 +212,11 @@ const titleFallback = "Pink Design - Appwrite's Design System";
body {
--search-bg-color: var(--color-neutral-0);
- --search-color: var(--color-neutral-100);
+ --search-color: var(--color-neutral-60);
}
body.theme-dark {
- --search-bg-color: var(--color-neutral-400);
- --search-color: var(--color-neutral-50);
+ --search-bg-color: var(--color-neutral-100);
+ --search-color: var(--color-neutral-20);
}
.color-box li {
diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
index 61bbeab556..324c4d7c27 100644
--- a/apps/pink/src/pages/elements/loader.mdx
+++ b/apps/pink/src/pages/elements/loader.mdx
@@ -28,8 +28,8 @@ Work different from the other rotate loaders.
| ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
| `--loading` | Loading precent | `--loading: 65%;` |
| `-loader-bg-color-light` | inner circle color (light-mode) that will fit background-color of the container | `--loader-bg-color-light: var(--color-neutral-5);` |
-| `-loader-bg-color-dark` | inner circle color (dark-mode) that will fit background-color of the container | `--loader-bg-color-dark: var(--color-neutral-400);`|
+| `-loader-bg-color-dark` | inner circle color (dark-mode) that will fit background-color of the container | `--loader-bg-color-dark: var(--color-neutral-100);`|
-
+
\ No newline at end of file
diff --git a/apps/pink/src/pages/foundations/colors.mdx b/apps/pink/src/pages/foundations/colors.mdx
index 614933ae6b..f6fadc3647 100644
--- a/apps/pink/src/pages/foundations/colors.mdx
+++ b/apps/pink/src/pages/foundations/colors.mdx
@@ -81,44 +81,44 @@ Pink Design's neutral palette is used for both light and dark mode. Neutrals are
~-~-color-neutral-10
-
- ~-~-color-neutral-30
+
+ ~-~-color-neutral-15
-
- ~-~-color-neutral-50
+
+ ~-~-color-neutral-20
-
- ~-~-color-neutral-70
+
+ ~-~-color-neutral-50
-
- ~-~-color-neutral-100
+
+ ~-~-color-neutral-60
-
- ~-~-color-neutral-120
+
+ ~-~-color-neutral-70
-
- ~-~-color-neutral-150
+
+ ~-~-color-neutral-80
-
- ~-~-color-neutral-200
+
+ ~-~-color-neutral-85
-
- ~-~-color-neutral-300
+
+ ~-~-color-neutral-90
-
- ~-~-color-neutral-400
+
+ ~-~-color-neutral-100
-
- ~-~-color-neutral-500
+
+ ~-~-color-neutral-105
diff --git a/apps/pink/src/pages/foundations/dark-theme.mdx b/apps/pink/src/pages/foundations/dark-theme.mdx
index 6df610423d..5da7dc0b82 100644
--- a/apps/pink/src/pages/foundations/dark-theme.mdx
+++ b/apps/pink/src/pages/foundations/dark-theme.mdx
@@ -38,13 +38,13 @@ This global CSS class is declared as a Sass variable in order to be used inside
$theme-dark: ".theme-dark";
.partial {
--p-partial-bg-color: var(--color-neutral-0);
- --p-partial-color: var(--color-neutral-100);
+ --p-partial-color: var(--color-neutral-60);
background-color: hsl(var(--partial-bg-color));
color: hsl(var(--partial-color));
/* Dark Theme */
#{$theme-dark} & {
- --p-partial-bg-color: var(--color-neutral-400);
- --p-partial-color: var(--color-neutral-50);
+ --p-partial-bg-color: var(--color-neutral-100);
+ --p-partial-color: var(--color-neutral-20);
}
}
@@ -65,14 +65,14 @@ This global CSS class is declared as a Sass variable in order to be used inside
`}
diff --git a/apps/pink/src/pages/index.astro b/apps/pink/src/pages/index.astro
index 4a42631c05..0a105d3076 100644
--- a/apps/pink/src/pages/index.astro
+++ b/apps/pink/src/pages/index.astro
@@ -538,7 +538,7 @@ const articles: Article[] = [
body {
&#{$theme-dark} {
- --p-body-bg-color: var(--color-neutral-500);
+ --p-body-bg-color: var(--color-neutral-105);
}
}
@@ -663,7 +663,7 @@ const articles: Article[] = [
--anim-duration: 400ms;
.theme-dark & {
- background-color: hsl(var(--color-neutral-200));
+ background-color: hsl(var(--color-neutral-85));
}
img {
@@ -904,15 +904,15 @@ const articles: Article[] = [
}
#{$theme-dark} & {
- --p-apple-window-bg-color: var(--color-neutral-300);
+ --p-apple-window-bg-color: var(--color-neutral-90);
}
}
.read-time {
- --p-text-color: var(--color-neutral-200);
+ --p-text-color: var(--color-neutral-85);
color: hsl(var(--p-text-color));
#{$theme-dark} & {
- --p-text-color: var(--color-neutral-30);
+ --p-text-color: var(--color-neutral-15);
}
}
@@ -975,7 +975,7 @@ const articles: Article[] = [
}
#{$theme-dark} & {
- --p-article-item-bg-color: var(--color-neutral-200);
+ --p-article-item-bg-color: var(--color-neutral-85);
}
}
}
diff --git a/packages/ui/src/1-css-variables/_colors.scss b/packages/ui/src/1-css-variables/_colors.scss
index d7940dd93a..5c0e71b980 100644
--- a/packages/ui/src/1-css-variables/_colors.scss
+++ b/packages/ui/src/1-css-variables/_colors.scss
@@ -9,20 +9,20 @@
/** Neutral **/
--color-neutral-0: 0 0% 100%; /* #ffffff */
- --color-neutral-5: 240 100% 99%; /* #FCFCFF */
- --color-neutral-10: 240 30% 96%; /* #F2F2F8 */
- --color-neutral-30: 232 21% 93%; /* #E8E9F0 */
- --color-neutral-50: 234 19% 81%; /* #C4C6D7 */
+ --color-neutral-5: 240 11% 98%; /* #FAFAFB */
+ --color-neutral-10: 240 9% 94%; /* #EDEDF0 */
+ --color-neutral-15: 240 4% 85%; /* #D8D8DB */
+ --color-neutral-20: 240 3% 77%; /* #C3C3C6 */
- --color-neutral-70: 223 14% 58%; /* #868EA3 */
- --color-neutral-100: 218 12% 43%; /* #616B7C */
- --color-neutral-120: 222 14% 36%; /* #4F5769 */
+ --color-neutral-50: 240 2% 52%; /* #818186 */
+ --color-neutral-60: 240 2% 43%; /* #6C6C71 */
+ --color-neutral-70: 240 3% 35%; /* #56565C */
- --color-neutral-150: 229 17% 26%; /* #373B4D */
- --color-neutral-200: 234 19% 19%; /* #282A3B */
- --color-neutral-300: 240 19% 13%; /* #1B1B28 */
- --color-neutral-400: 240 21% 11%; /* #171723 */
- --color-neutral-500: 240 22% 10%; /* #14141F */
+ --color-neutral-80: 240 4% 27%; /* #414146 */
+ --color-neutral-85: 240 4% 18%; /* #2D2D31 */
+ --color-neutral-90: 240 7% 12%; /* #1D1D21 */
+ --color-neutral-100: 240 6% 10%; /* #19191C */
+ --color-neutral-105: 240 5% 8%; /* #141416 */
/** Information **/
--color-information-hue: 189;
@@ -88,31 +88,31 @@
:root {
--color-pink-text: var(--color-primary-100);
- --color-text-disabled: var(--color-neutral-50);
- --color-text-offline: var(--color-neutral-70);
+ --color-text-disabled: var(--color-neutral-20);
+ --color-text-offline: var(--color-neutral-50);
--color-text-info: var(--color-information-100);
--color-text-danger: var(--color-danger-100);
--color-text-warning: var(--color-warning-100);
--color-text-success: var(--color-success-100);
- --color-text-gray: var(--color-neutral-70);
+ --color-text-gray: var(--color-neutral-50);
--color-border: var(--color-neutral-10);
- --scroll-color: var(--color-neutral-50);
+ --scroll-color: var(--color-neutral-20);
#{$theme-dark} {
--color-pink-text: var(--color-primary-200);
- --color-text-disabled: var(--color-neutral-100);
- --color-text-offline: var(--color-neutral-70);
+ --color-text-disabled: var(--color-neutral-60);
+ --color-text-offline: var(--color-neutral-50);
--color-text-info: var(--color-information-100);
--color-text-danger: var(--color-danger-100);
--color-text-warning: var(--color-warning-100);
--color-text-success: var(--color-success-100);
- --color-text-gray: var(--color-neutral-50);
+ --color-text-gray: var(--color-neutral-20);
- --color-border: var(--color-neutral-200);
- --scroll-color: var(--color-neutral-150);
+ --color-border: var(--color-neutral-85);
+ --scroll-color: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/1-css-variables/_shadows.scss b/packages/ui/src/1-css-variables/_shadows.scss
index 64f3f89d1b..859355254d 100644
--- a/packages/ui/src/1-css-variables/_shadows.scss
+++ b/packages/ui/src/1-css-variables/_shadows.scss
@@ -1,7 +1,7 @@
@use '../abstract' as *;
:root {
- --shadow-color: var(--color-neutral-150);
+ --shadow-color: var(--color-neutral-80);
--shadow-small: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.02)};
--shadow-large: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.04)};
@@ -11,7 +11,7 @@
--focus-box-shadow: #{$focus};
#{$theme-dark} {
- --shadow-color: var(--color-neutral-500);
+ --shadow-color: var(--color-neutral-105);
--shadow-small: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5)};
--shadow-large: #{pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 1)};
diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss
index 1451bd2d2f..f83921cefe 100644
--- a/packages/ui/src/2-resets/_typography.scss
+++ b/packages/ui/src/2-resets/_typography.scss
@@ -13,7 +13,7 @@ html {
}
body {
- --p-body-text-color: var(--color-neutral-100);
+ --p-body-text-color: var(--color-neutral-60);
--p-body-bg-color: var(--color-neutral-5);
font-family: var(--content-font);
-webkit-font-smoothing: antialiased;
@@ -24,8 +24,8 @@ body {
background-color: hsl(var(--p-body-bg-color));
&#{$theme-dark} {
- --p-body-text-color: var(--color-neutral-50);
- --p-body-bg-color: var(--color-neutral-500);
+ --p-body-text-color: var(--color-neutral-20);
+ --p-body-bg-color: var(--color-neutral-105);
}
}
@@ -50,7 +50,7 @@ code {
/* color for both heading */
[class*="heading-"] {
- --p-heading-text-color: var(--heading-text-color, var(--color-neutral-150));
+ --p-heading-text-color: var(--heading-text-color, var(--color-neutral-80));
color: hsl(var(--p-heading-text-color));
#{$theme-dark} & {
--p-heading-text-color: var(--heading-text-color, var(--color-neutral-10));
diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss
index c4dc7e44a5..53112d7587 100644
--- a/packages/ui/src/6-elements/_avatar.scss
+++ b/packages/ui/src/6-elements/_avatar.scss
@@ -9,14 +9,14 @@
--p-avatar-border-color: var(--p-avatar-border-color-default);
/* default */
- --p-avatar-text-color-default: var(--color-neutral-100);
+ --p-avatar-text-color-default: var(--color-neutral-60);
--p-avatar-bg-color-default: var(--color-neutral-5);
--p-avatar-border-color-default: var(--color-neutral-10);
/* empty */
- --p-avatar-text-color-empty: var(--color-neutral-50);
+ --p-avatar-text-color-empty: var(--color-neutral-20);
--p-avatar-bg-color-empty: var(--transparent);
- --p-avatar-border-color-empty: var(--color-neutral-50);
+ --p-avatar-border-color-empty: var(--color-neutral-20);
/* orange */
--p-avatar-text-color-orange: var(--color-neutral-0);
@@ -185,16 +185,16 @@
#{$theme-dark} & {
/* default */
- --p-avatar-text-color-default: var(--color-neutral-50);
- --p-avatar-bg-color-default: var(--color-neutral-200);
- --p-avatar-border-color-default: var(--color-neutral-150);
+ --p-avatar-text-color-default: var(--color-neutral-20);
+ --p-avatar-bg-color-default: var(--color-neutral-85);
+ --p-avatar-border-color-default: var(--color-neutral-80);
/* colors avatars*/
- --p-avatar-text-color-orange: var(--color-neutral-150);
- --p-avatar-text-color-green: var(--color-neutral-150);
- --p-avatar-text-color-blue: var(--color-neutral-150);
- --p-avatar-text-color-pink: var(--color-neutral-150);
- --p-avatar-text-color-red: var(--color-neutral-150);
+ --p-avatar-text-color-orange: var(--color-neutral-80);
+ --p-avatar-text-color-green: var(--color-neutral-80);
+ --p-avatar-text-color-blue: var(--color-neutral-80);
+ --p-avatar-text-color-pink: var(--color-neutral-80);
+ --p-avatar-text-color-red: var(--color-neutral-80);
}
@@ -227,6 +227,6 @@
border-width:pxToRem(1);
}
#{$theme-dark} & {
- --p-avatar-group-border-color: var(--color-neutral-500);
+ --p-avatar-group-border-color: var(--color-neutral-105);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_box.scss b/packages/ui/src/6-elements/_box.scss
index ffb7926992..23ec2c1e46 100644
--- a/packages/ui/src/6-elements/_box.scss
+++ b/packages/ui/src/6-elements/_box.scss
@@ -1,13 +1,13 @@
@use '../abstract' as *;
.box {
- --p-box-text-color: var(--color-neutral-100);
+ --p-box-text-color: var(--color-neutral-60);
--p-box-background-color: var(--p-box-background-color-default);
--p-box-background-color-default: var(--color-neutral-5);
--p-box-background-color-hover: var(--color-neutral-10);
- --p-box-border-color: var(--color-neutral-30);
+ --p-box-border-color: var(--color-neutral-15);
--p-box-padding: var(--box-padding, #{pxToRem(24)} );
--p-box-border-radius: var(--box-border-radius, var(--border-radius-xsmall));
@@ -36,9 +36,9 @@
#{$theme-dark} & {
--p-box-text-color: var(--color-neutral-5);
- --p-box-background-color-default: var(--color-neutral-200);
- --p-box-background-color-hover: var(--color-neutral-150);
- --p-box-border-color: var(--color-neutral-150);
+ --p-box-background-color-default: var(--color-neutral-85);
+ --p-box-background-color-hover: var(--color-neutral-80);
+ --p-box-border-color: var(--color-neutral-80);
}
}
diff --git a/packages/ui/src/6-elements/_button.scss b/packages/ui/src/6-elements/_button.scss
index 7a75f19235..929e10f2ab 100644
--- a/packages/ui/src/6-elements/_button.scss
+++ b/packages/ui/src/6-elements/_button.scss
@@ -31,7 +31,7 @@
--p-button-color-active: var(--color-primary-300);
--p-border-color-active: var(--color-primary-300);
- --p-text-color-disabled: var(--color-neutral-50);
+ --p-text-color-disabled: var(--color-neutral-20);
--p-button-color-disabled: var(--color-neutral-10);
--p-border-color-disabled: var(--color-neutral-10);
@@ -104,17 +104,17 @@
--p-border-color-active: var(--color-primary-300);
- --p-text-color-disabled: var(--color-neutral-100);
- --p-button-color-disabled: var(--color-neutral-150);
- --p-border-color-disabled: var(--color-neutral-150);
+ --p-text-color-disabled: var(--color-neutral-60);
+ --p-button-color-disabled: var(--color-neutral-80);
+ --p-border-color-disabled: var(--color-neutral-80);
}
/** end main button */
/* special color */
&.is-github {
--p-text-color-default: var(--color-neutral-0);
- --p-button-color-default: var(--color-neutral-150);
- --p-border-color-default: var(--color-neutral-150);
+ --p-button-color-default: var(--color-neutral-80);
+ --p-border-color-default: var(--color-neutral-80);
--p-text-color-hover: var(--p-text-color-default);
--p-button-color-hover: var(--p-button-color-default);
@@ -130,9 +130,9 @@
}
&.is-secondary {
- --p-text-color-default: var(--color-neutral-100);
+ --p-text-color-default: var(--color-neutral-60);
--p-button-color-default: var(--color-neutral-5);
- --p-border-color-default: var(--color-neutral-30);
+ --p-border-color-default: var(--color-neutral-15);
--p-text-color-hover: var(--p-text-color-default);
--p-button-color-hover: var(--color-neutral-10);
@@ -142,24 +142,24 @@
--p-button-color-focus: var(--p-button-color-default);
--p-border-color-focus: var(--transparent);
- --p-text-color-active: var(--color-neutral-300);
- --p-button-color-active: var(--color-neutral-30);
- --p-border-color-active: var(--color-neutral-30);
+ --p-text-color-active: var(--color-neutral-90);
+ --p-button-color-active: var(--color-neutral-15);
+ --p-border-color-active: var(--color-neutral-15);
- --p-text-color-disabled: var(--color-neutral-50);
+ --p-text-color-disabled: var(--color-neutral-20);
--p-button-color-disabled: var(--p-button-color-default);
- --p-border-color-disabled: var(--color-neutral-30);
+ --p-border-color-disabled: var(--color-neutral-15);
/** DARK MODE **/
#{$theme-dark} & {
--p-text-color-default: var(--color-neutral-5);
- --p-button-color-default: var(--color-neutral-300);
- --p-border-color-default: var(--color-neutral-150);
+ --p-button-color-default: var(--color-neutral-90);
+ --p-border-color-default: var(--color-neutral-80);
--p-text-color-hover: var(--p-text-color-default);
--p-button-color-hover: var(--transparent);
- --p-border-color-hover: var(--color-neutral-120);
+ --p-border-color-hover: var(--color-neutral-70);
--p-text-color-focus: var(--p-text-color-default);
--p-button-color-focus: var(--p-button-color-default);
@@ -167,20 +167,20 @@
--p-text-color-active: var(--p-text-color-default);
--p-button-color-active: var(--p-button-color-default);
- --p-border-color-active: var(--color-neutral-100);
+ --p-border-color-active: var(--color-neutral-60);
- --p-text-color-disabled: var(--color-neutral-100);
+ --p-text-color-disabled: var(--color-neutral-60);
--p-button-color-disabled: var(--p-button-color-default);
- --p-border-color-disabled: var(--color-neutral-150);
+ --p-border-color-disabled: var(--color-neutral-80);
}
}
&.is-text {
- --p-text-color-default: var(--color-neutral-100);
+ --p-text-color-default: var(--color-neutral-60);
--p-button-color-default: var(--transparent);
--p-border-color-default: var(--transparent);
- --p-text-color-hover: var(--color-neutral-120);
+ --p-text-color-hover: var(--color-neutral-70);
--p-button-color-hover: var(--p-button-color-default);
--p-border-color-hover: var(--p-border-color-default);
@@ -188,12 +188,12 @@
--p-button-color-focus: var(--color-neutral-5);
--p-border-color-focus: var(--p-border-color-default);
- --p-text-color-active: var(--color-neutral-300);
+ --p-text-color-active: var(--color-neutral-90);
--p-button-color-active: var(--p-button-color-default);
--p-border-color-active: var(--p-border-color-default);
- --p-text-color-disabled: var(--color-neutral-50);
+ --p-text-color-disabled: var(--color-neutral-20);
--p-button-color-disabled: var(--p-button-color-default);
--p-border-color-disabled: var(--p-border-color-default);
@@ -204,7 +204,7 @@
--p-button-color-default: var(--transparent);
--p-border-color-default: var(--transparent);
- --p-text-color-hover: var(--color-neutral-50);
+ --p-text-color-hover: var(--color-neutral-20);
--p-button-color-hover: var(--p-button-color-default);
--p-border-color-hover: var(--p-border-color-default);
@@ -216,7 +216,7 @@
--p-button-color-active: var(--p-button-color-default);
--p-border-color-active: var(--p-border-color-default);
- --p-text-color-disabled: var(--color-neutral-100);
+ --p-text-color-disabled: var(--color-neutral-60);
--p-button-color-disabled: var(--p-button-color-default);
--p-border-color-disabled: var(--p-border-color-default);
}
diff --git a/packages/ui/src/6-elements/_card.scss b/packages/ui/src/6-elements/_card.scss
index 47e7fe5f0e..c28dc2fdc6 100644
--- a/packages/ui/src/6-elements/_card.scss
+++ b/packages/ui/src/6-elements/_card.scss
@@ -6,7 +6,7 @@
--p-card-border-color: var(--p-card-border-color-default);
--p-card-border-color-default: var(--color-border);
- --p-card-border-color-hover: var(--color-neutral-30);
+ --p-card-border-color-hover: var(--color-neutral-15);
--p-card-border-radius: var(--card-border-radius, var(--border-radius-medium));
@@ -73,9 +73,9 @@
}
#{$theme-dark} & {
- --p-card-bg-color-default: var(--color-neutral-300);
- --p-card-bg-color-hover: var(--color-neutral-200);
- --p-card-border-color-hover: var(--color-neutral-150);
+ --p-card-bg-color-default: var(--color-neutral-90);
+ --p-card-bg-color-hover: var(--color-neutral-85);
+ --p-card-border-color-hover: var(--color-neutral-80);
}
@media #{$break1} {
@@ -85,7 +85,7 @@
}
.separator-with-text {
- --p-text-color: var(--color-neutral-50);
+ --p-text-color: var(--color-neutral-20);
display:flex; gap:pxToRem(16); align-items:center; margin-block:pxToRem(48);
color:hsl(var(--p-text-color)); font-size:var(--font-size-00); line-height:1;
@@ -93,6 +93,6 @@
&::after { content:""; display:block; flex:1; block-size:0; border-block-start:solid pxToRem(1) hsl(var(--color-border)); }
#{$theme-dark} & {
- --p-text-color: var(--color-neutral-70);
+ --p-text-color: var(--color-neutral-50);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_image-item.scss b/packages/ui/src/6-elements/_image-item.scss
index af0fda06b1..fc8d4acdfc 100644
--- a/packages/ui/src/6-elements/_image-item.scss
+++ b/packages/ui/src/6-elements/_image-item.scss
@@ -25,7 +25,7 @@
--p-image-item-size: #{$size-item-image};
}
#{$theme-dark} & {
- --p-image-item-bg-color: var(--color-neutral-200);
- --p-image-item-border-color: var(--color-neutral-150);
+ --p-image-item-bg-color: var(--color-neutral-85);
+ --p-image-item-border-color: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_inline-code.scss b/packages/ui/src/6-elements/_inline-code.scss
index 278e2de796..3f1b9156fe 100644
--- a/packages/ui/src/6-elements/_inline-code.scss
+++ b/packages/ui/src/6-elements/_inline-code.scss
@@ -1,7 +1,7 @@
@use '../abstract' as *;
.inline-code {
--p-bg-color-inline-code: var(--color-neutral-10);
- --p-text-color-inline-code: var(--color-neutral-100);
+ --p-text-color-inline-code: var(--color-neutral-60);
background-color: hsl(var(--p-bg-color-inline-code));
color: hsl(var(--p-text-color-inline-code));
@@ -10,7 +10,7 @@
padding: pxToRem(4);
#{$theme-dark} & {
- --p-bg-color-inline-code: var(--color-neutral-400);
- --p-text-color-inline-code: var(--color-neutral-30);
+ --p-bg-color-inline-code: var(--color-neutral-100);
+ --p-text-color-inline-code: var(--color-neutral-15);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_inline-tag.scss b/packages/ui/src/6-elements/_inline-tag.scss
index 2ca8a40838..c9ea2591f1 100644
--- a/packages/ui/src/6-elements/_inline-tag.scss
+++ b/packages/ui/src/6-elements/_inline-tag.scss
@@ -9,7 +9,7 @@
--p-inline-tag-text-color: var(--inline-tag-text-color, var(--p-inline-tag-text-color-default));
--p-inline-tag-bg-color: var(--inline-tag-bg-color, var(--p-inline-tag-bg-color-default));
- --p-inline-tag-text-color-default: var(--p-text-color, var(--color-neutral-100));
+ --p-inline-tag-text-color-default: var(--p-text-color, var(--color-neutral-60));
--p-inline-tag-bg-color-default: var(--color-neutral-10);
--p-inline-tag-text-color-info: var(--color-neutral-0);
@@ -30,7 +30,7 @@
/* Theme Dark */
#{$theme-dark} & {
- --p-inline-tag-text-color-default: var(--p-text-color, var(--color-neutral-50));
- --p-inline-tag-bg-color-default: var(--color-neutral-150);
+ --p-inline-tag-text-color-default: var(--p-text-color, var(--color-neutral-20));
+ --p-inline-tag-bg-color-default: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_kbd.scss b/packages/ui/src/6-elements/_kbd.scss
index 612257ff49..5a2adb2ac7 100644
--- a/packages/ui/src/6-elements/_kbd.scss
+++ b/packages/ui/src/6-elements/_kbd.scss
@@ -1,9 +1,9 @@
@use '../abstract' as *;
.kbd {
- --p-kbd-text-color: var(--color-neutral-100);
+ --p-kbd-text-color: var(--color-neutral-60);
--p-kbd-bg-color: var(--color-neutral-5);
- --p-kbd-border-color: var(--color-neutral-30);
+ --p-kbd-border-color: var(--color-neutral-15);
color: hsl(var(--p-kbd-text-color));
background-color: hsl(var(--p-kbd-bg-color));
@@ -16,7 +16,7 @@
#{$theme-dark} & {
--p-kbd-text-color: var(--color-neutral-5);
- --p-kbd-bg-color: var(--color-neutral-300);
- --p-kbd-border-color: var(--color-neutral-150);
+ --p-kbd-bg-color: var(--color-neutral-90);
+ --p-kbd-border-color: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss
index 7dada083b1..4764d11e21 100644
--- a/packages/ui/src/6-elements/_loader.scss
+++ b/packages/ui/src/6-elements/_loader.scss
@@ -3,7 +3,7 @@
--loading: 0%;
--p-loader-border-base-color: var(--color-neutral-10);
- --p-loader-base-full-color: var(--color-neutral-50);
+ --p-loader-base-full-color: var(--color-neutral-20);
--p-loader-size: var(--loader-size, #{pxToRem(24)});
--p-loader-border-size: var(--loader-border-size, #{pxToRem(2.5)});
@@ -50,9 +50,8 @@
/* Theme Dark */
#{$theme-dark} & {
- --p-loader-border-base-color: var(--color-neutral-120);
- --p-loader-base-full-color: var(--color-neutral-50);
-
- --p-loader-bg-color: var(--loader-bg-color-dark, var(--p-loader-bg-color-dark));
+ --p-loader-border-base-color: var(--color-neutral-20);
+ --p-loader-base-full-color: var(--color-neutral-100);
+ --p-loader-bg-color-default: var(--p-loader-bg-color-dark);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_table.scss b/packages/ui/src/6-elements/_table.scss
index 57cecae099..8b0954dcb2 100644
--- a/packages/ui/src/6-elements/_table.scss
+++ b/packages/ui/src/6-elements/_table.scss
@@ -1,14 +1,14 @@
@use '../abstract' as *;
.table {
/* global variable */
- --heading-text-color: var(--color-neutral-100);
+ --heading-text-color: var(--color-neutral-60);
/* local variable */
--p-table-bg-color: var(--color-neutral-0);
--p-table-bg-color-focus: var(--color-neutral-5);
//--p-table-bg-even-row-color: var(--color-neutral-0);
--p-table-border-color: var(--color-neutral-10);
- --p-tbody-color-text: var(--color-neutral-100);
+ --p-tbody-color-text: var(--color-neutral-60);
--p-border-radius: var(--border-radius-medium);
@@ -91,7 +91,7 @@
}
}
.button.is-text {
- --p-text-color-default: var(--color-neutral-50);
+ --p-text-color-default: var(--color-neutral-20);
}
&.is-table-layout-auto { table-layout:auto; }
@@ -136,13 +136,13 @@
#{$theme-dark} & {
/* global variable */
- --heading-text-color: var(--color-neutral-50);
+ --heading-text-color: var(--color-neutral-20);
/* local variable */
- --p-table-bg-color: var(--color-neutral-300);
- --p-table-bg-color-focus: var(--color-neutral-400);
- --p-table-border-color: var(--color-neutral-200);
- --p-tbody-color-text: var(--color-neutral-30);
+ --p-table-bg-color: var(--color-neutral-90);
+ --p-table-bg-color-focus: var(--color-neutral-100);
+ --p-table-border-color: var(--color-neutral-85);
+ --p-tbody-color-text: var(--color-neutral-15);
}
@media #{$break1}, #{$break2} {
diff --git a/packages/ui/src/6-elements/_tag.scss b/packages/ui/src/6-elements/_tag.scss
index b24623dc33..6c4fd7efc8 100644
--- a/packages/ui/src/6-elements/_tag.scss
+++ b/packages/ui/src/6-elements/_tag.scss
@@ -14,7 +14,7 @@
--p-tag-bg-color: var(--tag-bg-color, var(--p-tag-bg-color-default));
--p-tag-border-color: var(--tag-border-color , var(--p-tag-border-color-default));
- --p-tag-text-color-default: var(--color-neutral-120);
+ --p-tag-text-color-default: var(--color-neutral-70);
--p-tag-bg-color-default: var(--color-neutral-10);
--p-tag-border-color-default:var(--p-tag-bg-color-default);
@@ -35,23 +35,23 @@
--p-tag-border-color-info: var(--p-tag-bg-color-info);
/* clickable states */
- --p-tag-text-color-clickable:var(--color-neutral-100);
+ --p-tag-text-color-clickable:var(--color-neutral-60);
--p-tag-bg-color-clickable: var(--color-neutral-5);
--p-tag-border-color-clickable:var(--color-neutral-10);
- --p-tag-text-color-hover: var(--color-neutral-120);
+ --p-tag-text-color-hover: var(--color-neutral-70);
--p-tag-bg-color-hover: var(--color-neutral-10);
--p-tag-border-color-hover: var(--p-tag-bg-color-hover);
- --p-tag-text-color-active: var(--color-neutral-120);
- --p-tag-bg-color-active: var(--color-neutral-30);
+ --p-tag-text-color-active: var(--color-neutral-70);
+ --p-tag-bg-color-active: var(--color-neutral-15);
--p-tag-border-color-active: var(--p-tag-bg-color-active);
--p-tag-text-color-selected: var(--p-tag-text-color-clickable);
--p-tag-bg-color-selected: var(--p-tag-bg-color-clickable);
- --p-tag-border-color-selected: var(--color-neutral-70);
+ --p-tag-border-color-selected: var(--color-neutral-50);
- --p-tag-text-color-disabled: var(--color-neutral-50);
+ --p-tag-text-color-disabled: var(--color-neutral-20);
--p-tag-bg-color-disabled: var(--color-neutral-5);
--p-tag-border-color-disabled: var(--color-neutral-10);
/* End Light theme variables */
@@ -93,8 +93,8 @@
/* Theme Dark */
#{$theme-dark} & {
- --p-tag-text-color-default: var(--color-neutral-50);
- --p-tag-bg-color-default: var(--color-neutral-150);
+ --p-tag-text-color-default: var(--color-neutral-20);
+ --p-tag-bg-color-default: var(--color-neutral-80);
--p-tag-text-color-success: var(--color-success-100);
--p-tag-bg-color-success: var(--color-success-200);
@@ -109,20 +109,20 @@
--p-tag-bg-color-info: var(--color-information-200);
/* clickable state */
- --p-tag-text-color-clickable: var(--color-neutral-50);
- --p-tag-bg-color-clickable: var(--color-neutral-200);
- --p-tag-border-color-clickable: var(--color-neutral-150);
+ --p-tag-text-color-clickable: var(--color-neutral-20);
+ --p-tag-bg-color-clickable: var(--color-neutral-85);
+ --p-tag-border-color-clickable: var(--color-neutral-80);
- --p-tag-text-color-hover: var(--color-neutral-50);
- --p-tag-bg-color-hover: var(--color-neutral-150);
- --p-tag-border-color-hover: var(--color-neutral-150);
+ --p-tag-text-color-hover: var(--color-neutral-20);
+ --p-tag-bg-color-hover: var(--color-neutral-80);
+ --p-tag-border-color-hover: var(--color-neutral-80);
- --p-tag-text-color-active: var(--color-neutral-50);
- --p-tag-bg-color-active: var(--color-neutral-400);
- --p-tag-border-color-active: var(--color-neutral-400);
+ --p-tag-text-color-active: var(--color-neutral-20);
+ --p-tag-bg-color-active: var(--color-neutral-100);
+ --p-tag-border-color-active: var(--color-neutral-100);
- --p-tag-text-color-disabled: var(--color-neutral-120);
- --p-tag-bg-color-disabled: var(--color-neutral-200);
- --p-tag-border-color-disabled: var(--color-neutral-200);
+ --p-tag-text-color-disabled: var(--color-neutral-70);
+ --p-tag-bg-color-disabled: var(--color-neutral-85);
+ --p-tag-border-color-disabled: var(--color-neutral-85);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/_tooltip.scss b/packages/ui/src/6-elements/_tooltip.scss
index 51ac869c9a..a783c3c802 100644
--- a/packages/ui/src/6-elements/_tooltip.scss
+++ b/packages/ui/src/6-elements/_tooltip.scss
@@ -2,7 +2,7 @@
.tooltip {
/* Light Theme */
--p-tooltip-text-color: var(--color-neutral-10);
- --p-tooltip--bg-color: var(--color-neutral-100);
+ --p-tooltip--bg-color: var(--color-neutral-60);
/* End Light theme variables */
position:relative; line-height:1;
diff --git a/packages/ui/src/6-elements/form/_helper.scss b/packages/ui/src/6-elements/form/_helper.scss
index 6d0da0f28b..3e77436069 100644
--- a/packages/ui/src/6-elements/form/_helper.scss
+++ b/packages/ui/src/6-elements/form/_helper.scss
@@ -1,6 +1,6 @@
@use '../../abstract' as *;
.helper {
- --p-text-color: var(--color-neutral-70);
+ --p-text-color: var(--color-neutral-50);
display:flex;
font-size:var(--font-size-0); line-height:2; color:hsl(var(--p-text-color)); font-weight:400;
@@ -11,6 +11,6 @@
}
#{$theme-dark} &{
- --p-text-color: var(--color-neutral-50);
+ --p-text-color: var(--color-neutral-20);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_interactive-text-output.scss b/packages/ui/src/6-elements/form/_interactive-text-output.scss
index e4659ab0af..4cb173e1f0 100644
--- a/packages/ui/src/6-elements/form/_interactive-text-output.scss
+++ b/packages/ui/src/6-elements/form/_interactive-text-output.scss
@@ -1,7 +1,7 @@
@use '../../abstract' as *;
.interactive-text-output {
- --p-text-color: var(--color-neutral-100);
+ --p-text-color: var(--color-neutral-60);
--p-background-color: var(--color-neutral-10);
position:relative;
@@ -36,7 +36,7 @@
}
#{$theme-dark} & {
- --p-text-color: var(--color-neutral-50);
- --p-background-color: var(--color-neutral-150);
+ --p-text-color: var(--color-neutral-20);
+ --p-background-color: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_label.scss b/packages/ui/src/6-elements/form/_label.scss
index de58d26c85..e4dfa0f4a0 100644
--- a/packages/ui/src/6-elements/form/_label.scss
+++ b/packages/ui/src/6-elements/form/_label.scss
@@ -1,6 +1,6 @@
@use '../../abstract' as *;
.label {
- --p-label-text-color: var(--color-neutral-150);
+ --p-label-text-color: var(--color-neutral-80);
color: hsl(var(--p-label-text-color));
display: inline-block;
diff --git a/packages/ui/src/6-elements/form/_optional.scss b/packages/ui/src/6-elements/form/_optional.scss
index de2acea450..6327f81570 100644
--- a/packages/ui/src/6-elements/form/_optional.scss
+++ b/packages/ui/src/6-elements/form/_optional.scss
@@ -1,5 +1,5 @@
@use "../../abstract" as *;
.optional {
- color: hsl(var(--color-neutral-70));
+ color: hsl(var(--color-neutral-50));
font-size: pxToRem(14);
}
diff --git a/packages/ui/src/6-elements/form/_placeholder.scss b/packages/ui/src/6-elements/form/_placeholder.scss
index 91c8bcb020..3da539c4ba 100644
--- a/packages/ui/src/6-elements/form/_placeholder.scss
+++ b/packages/ui/src/6-elements/form/_placeholder.scss
@@ -2,11 +2,11 @@
::placeholder,
[contentEditable="true"] {
- --p-placeholder-color: var(--color-neutral-50);
- --p-placeholder-color-disabled: var(--color-neutral-50);
+ --p-placeholder-color: var(--color-neutral-20);
+ --p-placeholder-color-disabled: var(--color-neutral-20);
#{$theme-dark} & {
- --p-placeholder-color: var(--color-neutral-100);
+ --p-placeholder-color: var(--color-neutral-60);
}
}
@@ -17,8 +17,8 @@
:disabled::placeholder {
color: hsl(var(--p-placeholder-color-disabled));
#{$theme-dark} & {
- --p-placeholder-color: var(--color-neutral-120);
- --p-placeholder-color-disabled: var(--color-neutral-120);
+ --p-placeholder-color: var(--color-neutral-70);
+ --p-placeholder-color-disabled: var(--color-neutral-70);
}
}
diff --git a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
index cb009bd46b..3825d9f42d 100644
--- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
+++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss
@@ -13,13 +13,13 @@
--p-icon-color-default: var(--color-neutral-0);
--p-bg-color-default: var(--color-neutral-0);
- --p-border-color-default: var(--color-neutral-50);
+ --p-border-color-default: var(--color-neutral-20);
--p-bg-color-checked: var(--color-information-100);
--p-border-color-checked: var(--color-information-100);
--p-bg-color-hover: var(--color-neutral-5);
- --p-border-color-hover:var(--color-neutral-50);
+ --p-border-color-hover:var(--color-neutral-20);
--p-bg-color-hover-checked: var(--color-information-100);
--p-border-color-hover-checked: var(--color-information-100);
@@ -34,11 +34,11 @@
--p-border-color-active-checked: var(--color-information-120);
--p-bg-color-disabled: var(--color-neutral-10);
- --p-border-color-ddisabled: var(--color-neutral-30);
+ --p-border-color-ddisabled: var(--color-neutral-15);
--p-icon-color-disabled-checked: var(--color-neutral-0);
- --p-bg-color-disabled-checked: var(--color-neutral-30);
- --p-border-color-disabled-checked: var(--color-neutral-30);
+ --p-bg-color-disabled-checked: var(--color-neutral-15);
+ --p-border-color-disabled-checked: var(--color-neutral-15);
/* End theme variables */
display:inline-grid; place-content:center; flex-shrink:0;
@@ -93,12 +93,12 @@
/* Theme Dark */
#{$theme-dark} & {
- --p-bg-color-disabled: var(--color-neutral-150);
- --p-border-color-ddisabled: var(--color-neutral-120);
+ --p-bg-color-disabled: var(--color-neutral-80);
+ --p-border-color-ddisabled: var(--color-neutral-70);
- --p-icon-color-disabled-checked: var(--color-neutral-100);
- --p-bg-color-disabled-checked: var(--color-neutral-150);
- --p-border-color-disabled-checked: var(--color-neutral-150);
+ --p-icon-color-disabled-checked: var(--color-neutral-60);
+ --p-bg-color-disabled-checked: var(--color-neutral-80);
+ --p-border-color-disabled-checked: var(--color-neutral-80);
}
}
@@ -153,12 +153,12 @@
--p-radio-bitton-bg-color: var(--p-radio-bitton-bg-color-default);
--p-radio-bitton-border-color: var(--p-radio-bitton-border-color-default);
- --p-radio-bitton-text-color-default: var(--color-neutral-100);
+ --p-radio-bitton-text-color-default: var(--color-neutral-60);
--p-radio-bitton-bg-color-default: var(--color-neutral-5);
- --p-radio-bitton-border-color-default: var(--color-neutral-30);
+ --p-radio-bitton-border-color-default: var(--color-neutral-15);
--p-radio-bitton-text-color-checked: var(--p-radio-bitton-text-color-default);
- --p-radio-bitton-bg-color-checked: var(--color-neutral-30);
+ --p-radio-bitton-bg-color-checked: var(--color-neutral-15);
--p-radio-bitton-border-color-checked: var(--p-radio-bitton-border-color-default);
color: hsl(var(--p-radio-bitton-text-color));
@@ -185,13 +185,13 @@
}
#{$theme-dark} & {
- --p-radio-bitton-text-color-default: var(--color-neutral-50);
- --p-radio-bitton-bg-color-default: var(--color-neutral-200);
- --p-radio-bitton-border-color-default: var(--color-neutral-150);
+ --p-radio-bitton-text-color-default: var(--color-neutral-20);
+ --p-radio-bitton-bg-color-default: var(--color-neutral-85);
+ --p-radio-bitton-border-color-default: var(--color-neutral-80);
--p-radio-bitton-text-color-checked: var(--p-radio-bitton-text-color-default);
- --p-radio-bitton-bg-color-checked: var(--color-neutral-150);
- --p-radio-bitton-border-color-checked: var(--color-neutral-100);
+ --p-radio-bitton-bg-color-checked: var(--color-neutral-80);
+ --p-radio-bitton-border-color-checked: var(--color-neutral-60);
}
}
@@ -201,8 +201,8 @@
}
.choice-item {
- --p-choice-item-title-color: var(--color-neutral-120);
- --p-choice-item-text-color: var(--color-neutral-100);
+ --p-choice-item-title-color: var(--color-neutral-70);
+ --p-choice-item-text-color: var(--color-neutral-60);
display:flex; gap:pxToRem(8);
&-content { display:flex; flex-direction:column; gap:pxToRem(4); line-height:1.5; }
&-title { color:hsl(var(--p-choice-item-title-color)); font-weight:600;}
@@ -210,6 +210,6 @@
#{$theme-dark} & {
--p-choice-item-title-color: var(--color-neutral-10);
- --p-choice-item-text-color: var(--color-neutral-50);
+ --p-choice-item-text-color: var(--color-neutral-20);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_switch.scss b/packages/ui/src/6-elements/form/_switch.scss
index fb702f8b3a..ab5ab149a6 100644
--- a/packages/ui/src/6-elements/form/_switch.scss
+++ b/packages/ui/src/6-elements/form/_switch.scss
@@ -6,17 +6,17 @@
--p-switch-bg-color-disabled: var(--p-switch-bg-color-default);
--p-bg-color: var(--p-bg-color-default);
- --p-bg-color-default: var(--color-neutral-50);
+ --p-bg-color-default: var(--color-neutral-20);
--p-bg-color-checked: var(--color-information-100);
- --p-bg-color-hover: var(--color-neutral-50);
+ --p-bg-color-hover: var(--color-neutral-20);
--p-bg-color-checked-hover: var(--color-information-100);
- --p-bg-color-active: var(--color-neutral-100);
+ --p-bg-color-active: var(--color-neutral-60);
--p-bg-color-checked-active: var(--color-information-120);
- --p-bg-color-disabled: var(--color-neutral-30);
+ --p-bg-color-disabled: var(--color-neutral-15);
--p-bg-color-checked-disabled: var(--color-information-50);
@@ -73,8 +73,8 @@
#{$theme-dark} & {
- --p-switch-bg-color-disabled: var(--color-neutral-120);
- --p-bg-color-disabled: var(--color-neutral-200);
+ --p-switch-bg-color-disabled: var(--color-neutral-70);
+ --p-bg-color-disabled: var(--color-neutral-85);
--p-bg-color-checked-disabled: var(--color-information-200);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/6-elements/form/_tags-input.scss b/packages/ui/src/6-elements/form/_tags-input.scss
index 33de0adad0..083dd462db 100644
--- a/packages/ui/src/6-elements/form/_tags-input.scss
+++ b/packages/ui/src/6-elements/form/_tags-input.scss
@@ -14,11 +14,11 @@
/* default not read-only!!! this pseudo-class affect on div element and I need to overwrite this behavior */
&.is-read-only {
#{$theme-dark} &{
- --p-bg-color: var(--color-neutral-150);
- --p-border-color: var(--color-neutral-100);
+ --p-bg-color: var(--color-neutral-80);
+ --p-border-color: var(--color-neutral-60);
.tag {
- --tag-bg-color: var(--color-neutral-100);
- --tag-text-color: var(--color-neutral-30);
+ --tag-bg-color: var(--color-neutral-60);
+ --tag-text-color: var(--color-neutral-15);
}
}
}
@@ -31,8 +31,8 @@
}
.input-tag {
- --p-bg-color: var(--tag-bg-color, var(--color-neutral-30));
- --p-text-color: var(--tag-text-color, var(--color-neutral-100));
+ --p-bg-color: var(--tag-bg-color, var(--color-neutral-15));
+ --p-text-color: var(--tag-text-color, var(--color-neutral-60));
display:flex; height:pxToRem(28); gap:6px; align-items:center;
background-color:hsl(var(--p-bg-color)); padding-inline:pxToRem(8); padding-block:pxToRem(6); border-radius:var(--border-radius-xsmall);
color:hsl(var(--p-text-color));
@@ -40,9 +40,9 @@
aspect-ratio:1 / 1; line-height:1; border-radius:var(--border-radius-xsmall); text-align:center;
[class*="icon"]::before { vertical-align:middle; }
}
- &.is-disabled { --p-text-color:var(--color-neutral-50); }
+ &.is-disabled { --p-text-color:var(--color-neutral-20); }
#{$theme-dark} &{
- --tag-bg-color: var(--color-neutral-150);
- --tag-text-color: var(--color-neutral-50);
+ --tag-bg-color: var(--color-neutral-80);
+ --tag-text-color: var(--color-neutral-20);
}
}
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 8698b1691e..fa80e723ab 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -31,16 +31,16 @@ $input-text-wrapper: ".input-text-wrapper";
--p-bg-input-color: var(--color-neutral-0);
background-color: hsl(var(--p-bg-input-color));
#{$theme-dark} & {
- --p-bg-input-color: var(--color-neutral-400);
+ --p-bg-input-color: var(--color-neutral-100);
}
}
}
.options-list {
- --p-sep-color: var(--color-neutral-30);
+ --p-sep-color: var(--color-neutral-15);
--p-button-text-color: var(--p-button-text-color-default);
- --p-button-text-color-default: var(--color-neutral-70);
- --p-button-text-color-disabled: var(--color-neutral-30);
+ --p-button-text-color-default: var(--color-neutral-50);
+ --p-button-text-color-disabled: var(--color-neutral-15);
--p-button-bg-color: var(--p-button-bg-color-default);
--p-button-bg-color-default: var(--transparent);
@@ -64,14 +64,14 @@ $input-text-wrapper: ".input-text-wrapper";
&::before { display:none; }
}
#{$theme-dark} & {
- --p-sep-color: var(--color-neutral-150);
+ --p-sep-color: var(--color-neutral-80);
--p-button-text-color: var(--p-button-text-color-default);
- --p-button-text-color-default: var(--color-neutral-70);
- --p-button-text-color-disabled: var(--color-neutral-150);
+ --p-button-text-color-default: var(--color-neutral-50);
+ --p-button-text-color-disabled: var(--color-neutral-80);
--p-button-bg-color: var(--p-button-bg-color-default);
--p-button-bg-color-default: var(--transparent);
- --p-button-bg-color-focus: var(--color-neutral-200);
+ --p-button-bg-color-focus: var(--color-neutral-85);
}
}
@@ -91,23 +91,23 @@ textarea {
--p-bg-color: var(--p-bg-color-default);
--p-border-color: var(--p-border-color-default);
- --p-text-color-default: var(--color-neutral-100);
+ --p-text-color-default: var(--color-neutral-60);
--p-bg-color-default: var(--color-neutral-0);
- --p-border-color-default: var(--color-neutral-30);
+ --p-border-color-default: var(--color-neutral-15);
--p-text-color-hover: var(--p-text-color-default);
--p-bg-color-hover: var(--p-bg-color-default);
- --p-border-color-hover: var(--color-neutral-50);
+ --p-border-color-hover: var(--color-neutral-20);
--p-text-color-focus: var(--p-text-color-default);
--p-bg-color-focus: var(--p-bg-color-default);
- --p-border-color-focus: var(--color-neutral-50);
+ --p-border-color-focus: var(--color-neutral-20);
- --p-text-color-readonly: var(--color-neutral-50);
+ --p-text-color-readonly: var(--color-neutral-20);
--p-bg-color-readonly: var(--color-neutral-5);
--p-border-color-readonly: var(--p-border-color-default);
- --p-text-color-disabled: var(--color-neutral-50);
+ --p-text-color-disabled: var(--color-neutral-20);
--p-bg-color-disabled: var(--color-neutral-0);
--p-border-color-disabled: var(--p-border-color-default);
@@ -147,37 +147,36 @@ textarea {
--p-bg-color: var(--p-bg-color-disabled);
--p-border-color: var(--p-border-color-disabled);
- --p-border-color-hover: var(--color-neutral-100);
- cursor:initial;
+ --p-border-color-hover: var(--color-neutral-60);
}
#{$theme-dark} & {
- --p-text-color-default: var(--color-neutral-50);
- --p-bg-color-default: var(--color-neutral-400);
- --p-border-color-default: var(--color-neutral-150);
+ --p-text-color-default: var(--color-neutral-20);
+ --p-bg-color-default: var(--color-neutral-100);
+ --p-border-color-default: var(--color-neutral-80);
--p-text-color-hover: var(--p-text-color-default);
--p-bg-color-hover: var(--p-bg-color-default);
- --p-border-color-hover: var(--color-neutral-120);
+ --p-border-color-hover: var(--color-neutral-70);
--p-text-color-focus: var(--p-text-color-default);
--p-bg-color-focus: var(--p-bg-color-default);
- --p-border-color-focus: var(--color-neutral-120);
+ --p-border-color-focus: var(--color-neutral-70);
- --p-text-color-readonly: var(--color-neutral-100);
- --p-bg-color-readonly: var(--color-neutral-200);
- --p-border-color-readonly: var(--color-neutral-150);
+ --p-text-color-readonly: var(--color-neutral-60);
+ --p-bg-color-readonly: var(--color-neutral-85);
+ --p-border-color-readonly: var(--color-neutral-80);
- --p-text-color-disabled: var(--color-neutral-120);
+ --p-text-color-disabled: var(--color-neutral-70);
--p-bg-color-disabled: var(--p-bg-color-default);
- --p-border-color-disabled: var(--color-neutral-200);
+ --p-border-color-disabled: var(--color-neutral-85);
&:where([readonly], .is-read-only) {
- + .input-button { --p-border-color: var(--color-neutral-100); }
+ + .input-button { --p-border-color: var(--color-neutral-60); }
}
&:where(#{$disabled}) {
- + .input-button { --p-border-color: var(--color-neutral-150); }
+ + .input-button { --p-border-color: var(--color-neutral-80); }
}
}
}
@@ -188,8 +187,8 @@ textarea { block-size:pxToRem(200); }
padding-inline-start: pxToRem(48);
&:disabled {
+ .icon-search {
- color:hsl(var(--color-neutral-50));
- #{$theme-dark} & { color:hsl(var(--color-neutral-120));}
+ color:hsl(var(--color-neutral-20));
+ #{$theme-dark} & { color:hsl(var(--color-neutral-70));}
}
}
&::-webkit-search-cancel-button { display:none; }
@@ -242,11 +241,11 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
.custom-select {
position:relative;
.drop {
- --drop-border-color: var(--color-neutral-30);
+ --drop-border-color: var(--color-neutral-15);
--drop-border-radius: var(--border-radius-xsmall);
inset-inline:0; max-inline-size:none;
#{$theme-dark} & {
- --drop-border-color: var(--color-neutral-150);
+ --drop-border-color: var(--color-neutral-80);
}
}
.input-text-wrapper {
@@ -265,15 +264,15 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
}
.text-counter {
- --p-text-counter-color: var(--color-neutral-70);
+ --p-text-counter-color: var(--color-neutral-50);
display: flex;
user-select: none;
font-size: var(--font-size-00);
color: hsl(var(--p-text-counter-color));
&-separator::before { content:"/"; }
input:placeholder-shown + & {
- --p-text-counter-color: var(--color-neutral-50);
- #{$theme-dark} & { --p-text-counter-color: var(--color-neutral-70); }
+ --p-text-counter-color: var(--color-neutral-20);
+ #{$theme-dark} & { --p-text-counter-color: var(--color-neutral-50); }
}
#{$input-text-wrapper} > & { position:absolute; inset-block-start:pxToRem(12); inset-inline-end:pxToRem(16); }
}
diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss
index 74911b26a4..85ad12e082 100644
--- a/packages/ui/src/7-components/_action-bar.scss
+++ b/packages/ui/src/7-components/_action-bar.scss
@@ -2,7 +2,7 @@
.action-bar {
--p-action-bar-bg-color: var(--color-neutral-0);
--p-action-bar-border-color: var(--color-neutral-0);
- --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} hsl(var(--color-neutral-150) / 0.14);
+ --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} hsl(var(--color-neutral-80) / 0.14);
display:flex; gap:pxToRem(8); justify-content:space-between; align-items:baseline;
inline-size:pxToRem(312); padding-inline:pxToRem(12); padding-block:pxToRem(8);
@@ -17,8 +17,8 @@
@media #{$break2open} { inline-size:pxToRem(500); padding-inline:pxToRem(16); padding-block:pxToRem(12); }
#{$theme-dark} & {
- --p-action-bar-bg-color: var(--color-neutral-300);
- --p-action-bar-border-color: var(--color-neutral-200);
- --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} #{pxToRem(8)} hsl(var(--color-neutral-500));
+ --p-action-bar-bg-color: var(--color-neutral-90);
+ --p-action-bar-border-color: var(--color-neutral-85);
+ --p-action-bar-box-shadow: 0 #{pxToRem(6)} #{pxToRem(16)} #{pxToRem(8)} hsl(var(--color-neutral-105));
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_alert-sticky.scss b/packages/ui/src/7-components/_alert-sticky.scss
index 2bf47281ee..aa3b1354ad 100644
--- a/packages/ui/src/7-components/_alert-sticky.scss
+++ b/packages/ui/src/7-components/_alert-sticky.scss
@@ -4,14 +4,14 @@
$width-alert: pxToRem(440);
--p-alert-sticky-width-size: #{$width-alert};
- --p-alert-content-text-color: var(--color-neutral-120);
+ --p-alert-content-text-color: var(--color-neutral-70);
--p-alert-content-bg-color: var(--color-neutral-0);
--p-alert-content-border-color: var(--color-neutral-10);
/** type of messages colors **/
--p-alert-bg-color: var(--p-alert-bg-color-default);
/* default */
- --p-alert-bg-color-default: var(--color-neutral-50);
+ --p-alert-bg-color-default: var(--color-neutral-20);
/* info */
--p-alert-bg-color-info: var(--color-information-100);
/* success */
@@ -61,8 +61,8 @@
#{$theme-dark} & {
--p-alert-content-text-color: var(--color-neutral-10);
- --p-alert-content-bg-color: var(--color-neutral-200);
- --p-alert-content-border-color: var(--color-neutral-150);
+ --p-alert-content-bg-color: var(--color-neutral-85);
+ --p-alert-content-border-color: var(--color-neutral-80);
}
@media #{$break1} {
diff --git a/packages/ui/src/7-components/_alert.scss b/packages/ui/src/7-components/_alert.scss
index 944161e798..763372fe8a 100644
--- a/packages/ui/src/7-components/_alert.scss
+++ b/packages/ui/src/7-components/_alert.scss
@@ -1,14 +1,14 @@
@use '../abstract' as *;
.alert {
- --p-alert-text-color: var(--color-neutral-120);
+ --p-alert-text-color: var(--color-neutral-70);
--p-alert-bg-color: var(--color-neutral-5);
- --p-alert-border-color: var(--color-neutral-30);
+ --p-alert-border-color: var(--color-neutral-15);
/* states colors */
--p-alert-color: var(--p-alert-color-default);
- --p-alert-color-default: var(--color-neutral-50);
+ --p-alert-color-default: var(--color-neutral-20);
--p-alert-color-info: var(--color-information-100);
--p-alert-color-success: var(--color-success-100);
--p-alert-border-warning: var(--color-warning-100);
@@ -71,8 +71,8 @@
--p-alert-border-color: var(--color-neutral-10);
box-shadow: var(--shadow-small);
#{$theme-dark} & {
- --p-alert-bg-color: var(--color-neutral-300);
- --p-alert-border-color: var(--color-neutral-200);
+ --p-alert-bg-color: var(--color-neutral-90);
+ --p-alert-border-color: var(--color-neutral-85);
}
}
@@ -86,7 +86,7 @@
#{$theme-dark} & {
--p-alert-text-color: var(--color-neutral-5);
- --p-alert-bg-color: var(--color-neutral-200);
- --p-alert-border-color: var(--color-neutral-150);
+ --p-alert-bg-color: var(--color-neutral-85);
+ --p-alert-border-color: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_breadcrumbs.scss b/packages/ui/src/7-components/_breadcrumbs.scss
index ab24c1f53b..cc931d68ca 100644
--- a/packages/ui/src/7-components/_breadcrumbs.scss
+++ b/packages/ui/src/7-components/_breadcrumbs.scss
@@ -1,8 +1,8 @@
@use '../abstract' as *;
.breadcrumbs {
- --p-text-color: var(--color-neutral-70);
- --p-text-color-current: var(--color-neutral-150);
+ --p-text-color: var(--color-neutral-50);
+ --p-text-color-current: var(--color-neutral-80);
color: hsl(var(--p-text-color));
-webkit-user-select:none; user-select:none;
@@ -18,7 +18,7 @@
}
#{$theme-dark} & {
- --p-text-color: var(--color-neutral-50);
+ --p-text-color: var(--color-neutral-20);
--p-text-color-current: var(--color-neutral-5);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_buttons-list.scss b/packages/ui/src/7-components/_buttons-list.scss
index 0e1bf99747..ce12eacce3 100644
--- a/packages/ui/src/7-components/_buttons-list.scss
+++ b/packages/ui/src/7-components/_buttons-list.scss
@@ -2,7 +2,7 @@
.buttons-list {
display: flex;
- --p-button-list-border-color: var(--color-neutral-30);
+ --p-button-list-border-color: var(--color-neutral-15);
&-item {
position: relative;
&:nth-child(n + 2) {
@@ -23,7 +23,7 @@
}
#{$theme-dark} & {
- --p-button-list-border-color: var(--color-neutral-150);
+ --p-button-list-border-color: var(--color-neutral-80);
}
}
diff --git a/packages/ui/src/7-components/_clickable-list.scss b/packages/ui/src/7-components/_clickable-list.scss
index 7cb9e94a9c..de15b7d025 100644
--- a/packages/ui/src/7-components/_clickable-list.scss
+++ b/packages/ui/src/7-components/_clickable-list.scss
@@ -1,10 +1,10 @@
@use '../abstract' as *;
.clickable-list {
--p-clickable-button-bg-color-hover: var(--color-neutral-10);
- --p-clickable-title-text-color: var(--color-neutral-100);
- --p-clickable-desc-text-color: var(--color-neutral-70);
- --p-clickable-sep-color: var(--color-neutral-50);
- --color-border: var(--color-neutral-30); /* override global */
+ --p-clickable-title-text-color: var(--color-neutral-60);
+ --p-clickable-desc-text-color: var(--color-neutral-50);
+ --p-clickable-sep-color: var(--color-neutral-20);
+ --color-border: var(--color-neutral-15); /* override global */
&-item {
padding-block:pxToRem(4); -webkit-user-select:none; user-select:none;
@@ -24,11 +24,11 @@
&-desc { color:hsl(var(--p-clickable-desc-text-color)); font-size:var(--font-size-00); }
#{$theme-dark} & {
- --p-clickable-button-bg-color-hover: var(--color-neutral-200);
+ --p-clickable-button-bg-color-hover: var(--color-neutral-85);
--p-clickable-title-text-color: var(--color-neutral-10);
- --p-clickable-desc-text-color: var(--color-neutral-50);
- --p-clickable-sep-color: var(--color-neutral-150);
+ --p-clickable-desc-text-color: var(--color-neutral-20);
+ --p-clickable-sep-color: var(--color-neutral-80);
- --color-border: var(--color-neutral-150); /* override global */
+ --color-border: var(--color-neutral-80); /* override global */
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_code-panel.scss b/packages/ui/src/7-components/_code-panel.scss
index 0363ecb0b5..8af9e860eb 100644
--- a/packages/ui/src/7-components/_code-panel.scss
+++ b/packages/ui/src/7-components/_code-panel.scss
@@ -1,10 +1,9 @@
@use "../abstract" as *;
.code-panel {
- --p-code-panel-header: var(--color-neutral-5);
- --p-code-panel-border-color: var(--color-neutral-30);
- --p-code-panel-content: var(--color-neutral-0);
- --p-code-panel-text-color: var(--color-neutral-150);
+ --p-code-panel-header: var(--color-neutral-85);
+ --p-code-panel-content: var(--color-neutral-90);
+ --p-code-panel-text-color: var(--color-neutral-5);
display: flex;
flex-direction: column;
diff --git a/packages/ui/src/7-components/_collapsible.scss b/packages/ui/src/7-components/_collapsible.scss
index cf44d84dee..c56fd84335 100644
--- a/packages/ui/src/7-components/_collapsible.scss
+++ b/packages/ui/src/7-components/_collapsible.scss
@@ -1,7 +1,7 @@
@use '../abstract' as *;
.collapsible {
- --p-toggle-border-color: var(--color-neutral-30);
- --p-toggle-optional-color: var(--color-neutral-70);
+ --p-toggle-border-color: var(--color-neutral-15);
+ --p-toggle-optional-color: var(--color-neutral-50);
::-webkit-details-marker { display:none; }
@@ -32,6 +32,6 @@
padding-block-start:0; padding-block-end:pxToRem(24);
}
#{$theme-dark} & {
- --p-toggle-border-color: var(--color-neutral-120);
+ --p-toggle-border-color: var(--color-neutral-70);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_drop.scss b/packages/ui/src/7-components/_drop.scss
index eb4213a66a..39fb869f0e 100644
--- a/packages/ui/src/7-components/_drop.scss
+++ b/packages/ui/src/7-components/_drop.scss
@@ -69,7 +69,7 @@
border-block-start:solid pxToRem(1) hsl(var(--p-section-border-color));
}
#{$theme-dark} & {
- --p-section-border-color: var(--color-neutral-200);
+ --p-section-border-color: var(--color-neutral-85);
}
}
/** states **/
@@ -119,8 +119,8 @@
&-item { flex-shrink:0}
}
&-button {
- --p-drop-icon-color: var(--color-neutral-50);
- --p-drop-text-color: var(--color-neutral-100);
+ --p-drop-icon-color: var(--color-neutral-20);
+ --p-drop-text-color: var(--color-neutral-60);
--p-drop-item-bg-color-hover: var(--color-neutral-10);
--p-drop-item-bg-color-selected: var(--color-neutral-10);
@@ -148,12 +148,12 @@
}
#{$theme-dark} &{
- --p-drop-bg-color: var(--color-neutral-500);
- --p-drop-border-color: var(--drop-border-color, var(--color-neutral-200));
+ --p-drop-bg-color: var(--color-neutral-105);
+ --p-drop-border-color: var(--drop-border-color, var(--color-neutral-85));
&-button {
- --p-drop-text-color: var(--color-neutral-30);
- --p-drop-item-bg-color-hover: var(--color-neutral-200);
- --p-drop-item-bg-color-selected: var(--color-neutral-200);
+ --p-drop-text-color: var(--color-neutral-15);
+ --p-drop-item-bg-color-hover: var(--color-neutral-85);
+ --p-drop-item-bg-color-selected: var(--color-neutral-85);
}
}
}
diff --git a/packages/ui/src/7-components/_file-preview.scss b/packages/ui/src/7-components/_file-preview.scss
index 2bf8d0bb3e..e333533a48 100644
--- a/packages/ui/src/7-components/_file-preview.scss
+++ b/packages/ui/src/7-components/_file-preview.scss
@@ -1,6 +1,6 @@
@use '../abstract' as *;
.file-preview {
- --p-file-preview-text-color: var(--color-neutral-50);
+ --p-file-preview-text-color: var(--color-neutral-20);
--p-file-preview-bg-color: var(--color-neutral-0);
--p-file-preview-border-color: var(--color-neutral-5);
@@ -29,8 +29,8 @@
&.is-with-image { border-width:0; }
#{$theme-dark} & {
- --p-file-preview-text-color: var(--color-neutral-50);
- --p-file-preview-bg-color: var(--color-neutral-300);
- --p-file-preview-border-color: var(--color-neutral-200);
+ --p-file-preview-text-color: var(--color-neutral-20);
+ --p-file-preview-bg-color: var(--color-neutral-90);
+ --p-file-preview-border-color: var(--color-neutral-85);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_grid-item-1.scss b/packages/ui/src/7-components/_grid-item-1.scss
index 0f28ebdc44..6603e5845d 100644
--- a/packages/ui/src/7-components/_grid-item-1.scss
+++ b/packages/ui/src/7-components/_grid-item-1.scss
@@ -1,6 +1,6 @@
@use '../abstract' as *;
.grid-item-1 {
- --small-title-color: var(--color-neutral-50);
+ --small-title-color: var(--color-neutral-20);
display: grid;
grid-template-areas: "start-start start-end"
diff --git a/packages/ui/src/7-components/_list.scss b/packages/ui/src/7-components/_list.scss
index 7d464ada42..309d6d4d23 100644
--- a/packages/ui/src/7-components/_list.scss
+++ b/packages/ui/src/7-components/_list.scss
@@ -1,6 +1,6 @@
@use "../abstract" as *;
.list {
- --p-list-text-color: var(--color-neutral-100);
+ --p-list-text-color: var(--color-neutral-60);
color: hsl(var(--p-list-text-color));
display:flex; flex-direction:column; gap:pxToRem(24); font-size:pxToRem(16);
@@ -20,14 +20,14 @@
}
#{$theme-dark} & {
- --p-list-text-color: var(--color-neutral-50);
+ --p-list-text-color: var(--color-neutral-20);
}
}
.numeric-list {
--p-numeric-border-color: var(--color-neutral-10);
--p-numeric-bg-color: var(--color-neutral-5);
- --p-numeric-text-color: var(--color-neutral-100);
+ --p-numeric-text-color: var(--color-neutral-60);
counter-reset: number;
display:grid; row-gap:pxToRem(24);
&-item {
@@ -42,9 +42,9 @@
}
}
#{$theme-dark} & {
- --p-numeric-border-color: var(--color-neutral-150);
- --p-numeric-bg-color: var(--color-neutral-200);
- --p-numeric-text-color: var(--color-neutral-50);
+ --p-numeric-border-color: var(--color-neutral-80);
+ --p-numeric-bg-color: var(--color-neutral-85);
+ --p-numeric-text-color: var(--color-neutral-20);
}
}
diff --git a/packages/ui/src/7-components/_main-header.scss b/packages/ui/src/7-components/_main-header.scss
index 174d9bbcf4..ab44b15dcb 100644
--- a/packages/ui/src/7-components/_main-header.scss
+++ b/packages/ui/src/7-components/_main-header.scss
@@ -25,7 +25,7 @@
#{$theme-dark} & {
- --p-main-header-bg-color: var(--color-neutral-500);
+ --p-main-header-bg-color: var(--color-neutral-105);
}
@media #{$break1}, #{$break2} {
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index 5bb97f1006..0330c2c788 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -1,7 +1,7 @@
@use '../abstract' as *;
.modal {
- --p-modal-title-color: var(--color-neutral-150);
- --p-modal-text-color: var(--color-neutral-100);
+ --p-modal-title-color: var(--color-neutral-80);
+ --p-modal-text-color: var(--color-neutral-60);
--p-modal-bg-color: var(--color-neutral-0);
--p-modal-border-color: var(--color-neutral-10);
@@ -38,8 +38,8 @@
--padding-header-bottom: #{$header-padding-bottom};
}
&.is-inner-modal {
- --p-modal-title-color: var(--color-neutral-500);
- --p-modal-text-color: var(--color-neutral-100);
+ --p-modal-title-color: var(--color-neutral-105);
+ --p-modal-text-color: var(--color-neutral-60);
--p-modal-bg-color: var(--color-neutral-5);
--p-modal-border-color: var(--color-neutral-10);
@@ -60,8 +60,8 @@
border-block-start:solid pxToRem(1) hsl(var(--p-modal-border-color));
}
#{$theme-dark} & {
- --p-modal-bg-color: var(--color-neutral-200);
- --p-modal-border-color: var(--color-neutral-150);
+ --p-modal-bg-color: var(--color-neutral-85);
+ --p-modal-border-color: var(--color-neutral-80);
}
}
&.is-separate-header {
@@ -107,11 +107,11 @@
#{$theme-dark} & {
--p-modal-title-color: var(--color-neutral-10);
- --p-modal-text-color: var(--color-neutral-50);
- --p-modal-bg-color: var(--color-neutral-300);
- --p-modal-border-color: var(--color-neutral-200);
+ --p-modal-text-color: var(--color-neutral-20);
+ --p-modal-bg-color: var(--color-neutral-90);
+ --p-modal-border-color: var(--color-neutral-85);
- --color-border: var(--color-neutral-150);
+ --color-border: var(--color-neutral-80);
&::backdrop { background-color:hsl(240 22% 10% / 0.6); }
diff --git a/packages/ui/src/7-components/_pagination.scss b/packages/ui/src/7-components/_pagination.scss
index 9515209f78..25e72e5c1c 100644
--- a/packages/ui/src/7-components/_pagination.scss
+++ b/packages/ui/src/7-components/_pagination.scss
@@ -17,9 +17,9 @@
/* adjust color from default button */
&:where(:not(.is-text)) {
- --p-text-color-disabled: var(--color-neutral-300);
+ --p-text-color-disabled: var(--color-neutral-90);
#{$theme-dark} & {
- --p-text-color-disabled: var(--color-neutral-50);
+ --p-text-color-disabled: var(--color-neutral-20);
}
}
}
diff --git a/packages/ui/src/7-components/_progress-bar.scss b/packages/ui/src/7-components/_progress-bar.scss
index a6b8585849..dd54fb8cca 100644
--- a/packages/ui/src/7-components/_progress-bar.scss
+++ b/packages/ui/src/7-components/_progress-bar.scss
@@ -1,14 +1,14 @@
@use '../abstract' as *;
.progress-bar {
- --p-graph-bg-color: var(--color-neutral-30);
+ --p-graph-bg-color: var(--color-neutral-15);
--p-graph-color-fill: var(--color-information-100);
--p-graph-color-warning: var(--color-warning-100);
--p-graph-color-danger: var(--color-danger-100);
- --p-graph-icon-color: var(--color-neutral-70);
- --p-graph-text-color: var(--color-neutral-100);
- --p-graph-used-text-color: var(--color-neutral-120);
- --p-graph-max-text-color: var(--color-neutral-70);
+ --p-graph-icon-color: var(--color-neutral-50);
+ --p-graph-text-color: var(--color-neutral-60);
+ --p-graph-used-text-color: var(--color-neutral-70);
+ --p-graph-max-text-color: var(--color-neutral-50);
display:flex; flex-direction:column; gap:pxToRem(8);
-webkit-user-select:none; user-select:none;
@@ -35,9 +35,9 @@
#{$theme-dark} & {
- --p-graph-bg-color: var(--color-neutral-200);
- --p-graph-icon-color: var(--color-neutral-50);
- --p-graph-text-color: var(--color-neutral-50);
- --p-graph-used-text-color: var(--color-neutral-50);
+ --p-graph-bg-color: var(--color-neutral-85);
+ --p-graph-icon-color: var(--color-neutral-20);
+ --p-graph-text-color: var(--color-neutral-20);
+ --p-graph-used-text-color: var(--color-neutral-20);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_secondary-tabs.scss b/packages/ui/src/7-components/_secondary-tabs.scss
index 18cba5f677..35aa2df721 100644
--- a/packages/ui/src/7-components/_secondary-tabs.scss
+++ b/packages/ui/src/7-components/_secondary-tabs.scss
@@ -1,6 +1,6 @@
@use '../abstract' as *;
.secondary-tabs {
- --p-drop-tab-text-color: var(--color-neutral-100);
+ --p-drop-tab-text-color: var(--color-neutral-60);
--p-drop-tab-bg-color: var(--transparent);
$drop-tab-height: pxToRem(32);
@@ -35,10 +35,10 @@
}
}
#{$theme-dark} & {
- --p-drop-tab-text-color: var(--color-neutral-30);
+ --p-drop-tab-text-color: var(--color-neutral-15);
&-button {
&:where(#{$disabled}) {
- --p-drop-tab-bg-color: var(--color-neutral-200);
+ --p-drop-tab-bg-color: var(--color-neutral-85);
}
}
}
diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss
index 57803cfa24..7ea7a67838 100644
--- a/packages/ui/src/7-components/_side-nav.scss
+++ b/packages/ui/src/7-components/_side-nav.scss
@@ -4,7 +4,7 @@
--p-side-nav-bg-color: var(--color-neutral-0);
--p-side-nav-border-color: var(--color-border);
- --p-side-nav-header-text-color: var(--color-neutral-70);
+ --p-side-nav-header-text-color: var(--color-neutral-50);
background-color: hsl(var(--p-side-nav-bg-color));
border-inline-end: solid pxToRem(1) hsl(var(--p-side-nav-border-color));
@@ -77,9 +77,9 @@
.eyebrow-heading-3 { color: var(--p-side-nav-header-text-color); }
#{$theme-dark} & {
- --p-side-nav-bg-color: var(--color-neutral-500);
+ --p-side-nav-bg-color: var(--color-neutral-105);
- --p-side-nav-header-text-color: var(--color-neutral-50);
+ --p-side-nav-header-text-color: var(--color-neutral-20);
}
@media #{$break1}, #{$break2} {
&.is-mobile-center {
diff --git a/packages/ui/src/7-components/_status.scss b/packages/ui/src/7-components/_status.scss
index d68d81f568..5e840a0de6 100644
--- a/packages/ui/src/7-components/_status.scss
+++ b/packages/ui/src/7-components/_status.scss
@@ -1,7 +1,7 @@
@use '../abstract' as *;
.status {
- --p-status-color: var(--color-neutral-70);
+ --p-status-color: var(--color-neutral-50);
display: flex;
align-items: baseline;
@@ -13,7 +13,7 @@
}
/* Status */
- &.is-offline { --p-status-color:var(--color-neutral-70); }
+ &.is-offline { --p-status-color:var(--color-neutral-50); }
&.is-waiting { --p-status-color:var(--color-warning-50); }
&.is-pending { --p-status-color:var(--color-warning-100); }
&.is-failed { --p-status-color:var(--color-danger-100); }
diff --git a/packages/ui/src/7-components/_steps.scss b/packages/ui/src/7-components/_steps.scss
index bc672750a2..732255e332 100644
--- a/packages/ui/src/7-components/_steps.scss
+++ b/packages/ui/src/7-components/_steps.scss
@@ -3,14 +3,14 @@
--p-step-bullet-icon-color: var(--color-neutral-0);
--p-step-bullet-content-color: var(--color-neutral-0);
--p-step-bullet-padding-color: var(--color-neutral-0);
- --p-step-bullet-border-color: var(--color-neutral-50);
+ --p-step-bullet-border-color: var(--color-neutral-20);
- --p-step-bullet-sep-color: var(--color-neutral-50);
+ --p-step-bullet-sep-color: var(--color-neutral-20);
// Done step
--p-step-bullet-icon-color-done: var(--color-neutral-0);
- --p-step-bullet-content-color-done: var(--color-neutral-50);
- --p-step-bullet-padding-color-done: var(--color-neutral-50);
+ --p-step-bullet-content-color-done: var(--color-neutral-20);
+ --p-step-bullet-padding-color-done: var(--color-neutral-20);
//--p-step-bullet-border-color-done: var(--color-neutral-50);
// Current Step
@@ -20,13 +20,13 @@
--p-step-bullet-border-color-current: var(--color-primary-100);
/* Color Text */
- --p-step-text-color: var(--color-neutral-100);
- --p-step-text-color-done: var(--color-neutral-70);
+ --p-step-text-color: var(--color-neutral-60);
+ --p-step-text-color-done: var(--color-neutral-50);
--p-step-text-color-current: var(--color-primary-100);
- --p-substep-text-color: var(--color-neutral-70);
- --p-substep-text-color-done: var(--color-neutral-70);
- --p-substep-text-color-current: var(--color-neutral-150);
+ --p-substep-text-color: var(--color-neutral-50);
+ --p-substep-text-color-done: var(--color-neutral-50);
+ --p-substep-text-color-current: var(--color-neutral-80);
display:grid;
&-item {
@@ -91,22 +91,22 @@
}
#{$theme-dark} &{
- --p-step-bullet-content-color: var(--color-neutral-400);
- --p-step-bullet-padding-color: var(--color-neutral-400);
- --p-step-bullet-border-color: var(--color-neutral-100);
+ --p-step-bullet-content-color: var(--color-neutral-100);
+ --p-step-bullet-padding-color: var(--color-neutral-100);
+ --p-step-bullet-border-color: var(--color-neutral-60);
- --p-step-bullet-sep-color: var(--color-neutral-100);
+ --p-step-bullet-sep-color: var(--color-neutral-60);
- --p-step-bullet-content-color-done: var(--color-neutral-70);
- --p-step-bullet-padding-color-done: var(--color-neutral-70);
+ --p-step-bullet-content-color-done: var(--color-neutral-50);
+ --p-step-bullet-padding-color-done: var(--color-neutral-50);
/* Color Text */
- --p-step-text-color: var(--color-neutral-30);
- --p-step-text-color-done: var(--color-neutral-70);
+ --p-step-text-color: var(--color-neutral-15);
+ --p-step-text-color-done: var(--color-neutral-50);
--p-step-text-color-current: var(--color-primary-100);
- --p-substep-text-color: var(--color-neutral-100);
- --p-substep-text-color-done: var(--color-neutral-100);
- --p-substep-text-color-current: var(--color-neutral-50);
+ --p-substep-text-color: var(--color-neutral-60);
+ --p-substep-text-color-done: var(--color-neutral-60);
+ --p-substep-text-color-current: var(--color-neutral-20);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_tabs.scss b/packages/ui/src/7-components/_tabs.scss
index 16c12f40b1..2e3e4193c2 100644
--- a/packages/ui/src/7-components/_tabs.scss
+++ b/packages/ui/src/7-components/_tabs.scss
@@ -1,7 +1,7 @@
@use '../abstract' as *;
.tabs {
- --p-tabs-text-color: var(--color-neutral-100);
+ --p-tabs-text-color: var(--color-neutral-60);
--p-tabs-color-hover: var(--color-neutral-10);
--p-tabs-color-selected: var(--color-primary-200);
@@ -56,10 +56,10 @@
}
}
#{$theme-dark} & {
- --p-tabs-text-color: var(--color-neutral-50);
- --p-tabs-color-hover: var(--color-neutral-200);
+ --p-tabs-text-color: var(--color-neutral-20);
+ --p-tabs-color-hover: var(--color-neutral-85);
--p-tabs-color-selected: var(--color-primary-200);
- --tabs-shadow-color: var(--color-neutral-400);
+ --tabs-shadow-color: var(--color-neutral-100);
}
}
diff --git a/packages/ui/src/7-components/_toggle-button.scss b/packages/ui/src/7-components/_toggle-button.scss
index 7f0bb271a5..e5d46d5c93 100644
--- a/packages/ui/src/7-components/_toggle-button.scss
+++ b/packages/ui/src/7-components/_toggle-button.scss
@@ -1,11 +1,11 @@
@use '../abstract' as *;
.toggle-button {
--p-icon-toggle-bg-color: var(--color-neutral-0);
- --p-icon-toggle-border-color: var(--color-neutral-30);
+ --p-icon-toggle-border-color: var(--color-neutral-15);
--p-icon-text-color: var(--p-icon-text-color-default);
- --p-icon-text-color-default: var(--color-neutral-100);
- --p-icon-text-color-didabled: var(--color-neutral-50);
+ --p-icon-text-color-default: var(--color-neutral-60);
+ --p-icon-text-color-didabled: var(--color-neutral-20);
--p-button-color: var(--p-button-color-default);
--p-button-color-default: var(--transparent);
@@ -29,12 +29,12 @@
}
#{$theme-dark} & {
- --p-icon-toggle-bg-color: var(--color-neutral-300);
- --p-icon-toggle-border-color: var(--color-neutral-150);
+ --p-icon-toggle-bg-color: var(--color-neutral-90);
+ --p-icon-toggle-border-color: var(--color-neutral-80);
- --p-icon-text-color-default: var(--color-neutral-50);
- --p-icon-text-color-didabled: var(--color-neutral-120);
+ --p-icon-text-color-default: var(--color-neutral-20);
+ --p-icon-text-color-didabled: var(--color-neutral-70);
- --p-button-color-selected: var(--color-neutral-150);
+ --p-button-color-selected: var(--color-neutral-80);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_top-cover.scss b/packages/ui/src/7-components/_top-cover.scss
index 6371c95366..930da89585 100644
--- a/packages/ui/src/7-components/_top-cover.scss
+++ b/packages/ui/src/7-components/_top-cover.scss
@@ -27,6 +27,6 @@
#{$theme-dark} & {
- --p-cover-bg-color: var(--color-neutral-400);
+ --p-cover-bg-color: var(--color-neutral-100);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_upload-box.scss b/packages/ui/src/7-components/_upload-box.scss
index df173e9d85..813db1a4c2 100644
--- a/packages/ui/src/7-components/_upload-box.scss
+++ b/packages/ui/src/7-components/_upload-box.scss
@@ -1,9 +1,9 @@
@use '../abstract' as *;
.upload-box {
- --p-header-text-color: var(--color-neutral-120);
+ --p-header-text-color: var(--color-neutral-70);
--p-header-bg-color: var(--color-neutral-10);
- --p-content-text-color: var(--color-neutral-100);
+ --p-content-text-color: var(--color-neutral-60);
--p-content-bg-color: var(--color-neutral-0);
--p-border-color: var(--color-neutral-10);
@@ -65,12 +65,12 @@
/* dark theme */
#{$theme-dark} &{
- --p-header-text-color: var(--color-neutral-50);
- --p-header-bg-color: var(--color-neutral-400);
+ --p-header-text-color: var(--color-neutral-20);
+ --p-header-bg-color: var(--color-neutral-100);
- --p-content-text-color: var(--color-neutral-50);
- --p-content-bg-color: var(--color-neutral-300);
+ --p-content-text-color: var(--color-neutral-20);
+ --p-content-bg-color: var(--color-neutral-90);
- --p-border-color: var(--color-neutral-200);
+ --p-border-color: var(--color-neutral-85);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_upload-file-box.scss b/packages/ui/src/7-components/_upload-file-box.scss
index eb8b4c4377..925a7d55a9 100644
--- a/packages/ui/src/7-components/_upload-file-box.scss
+++ b/packages/ui/src/7-components/_upload-file-box.scss
@@ -1,10 +1,10 @@
@use '../abstract' as *;
.upload-file-box {
//--color-border: var(--color-neutral-50);
- --p-icon-file: var(--color-neutral-50);
- --p-title-color: var(--color-neutral-120);
- --p-info-text: var(--color-neutral-100);
- --p-file-size: var(--color-neutral-70);
+ --p-icon-file: var(--color-neutral-20);
+ --p-title-color: var(--color-neutral-70);
+ --p-info-text: var(--color-neutral-60);
+ --p-file-size: var(--color-neutral-50);
display: flex;
flex-direction: column;
@@ -32,9 +32,9 @@
$size: pxToRem(48);
--p-size: #{$size};
- --p-image-color: var(--color-neutral-100);
+ --p-image-color: var(--color-neutral-60);
--p-bg-color: var(--color-neutral-5);
- --p-border-color: var(--color-neutral-30);
+ --p-border-color: var(--color-neutral-15);
color: hsl(var(--p-image-color));
background-color: hsl(var(--p-bg-color));
@@ -50,9 +50,9 @@
}
#{$theme-dark} & {
- --p-image-color: var(--color-neutral-100);
- --p-bg-color: var(--color-neutral-300);
- --p-border-color: var(--color-neutral-150);
+ --p-image-color: var(--color-neutral-60);
+ --p-bg-color: var(--color-neutral-90);
+ --p-border-color: var(--color-neutral-80);
}
}
@@ -69,6 +69,6 @@
/* Theme Dark */
#{$theme-dark} & {
--p-title-color: var(--color-neutral-5);
- --p-info-text: var(--color-neutral-50);
+ --p-info-text: var(--color-neutral-20);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_upload-image.scss b/packages/ui/src/7-components/_upload-image.scss
index bf3ca095d9..e3bce5c022 100644
--- a/packages/ui/src/7-components/_upload-image.scss
+++ b/packages/ui/src/7-components/_upload-image.scss
@@ -5,8 +5,8 @@
--p-upload-image-size: var(--upload-image-size, #{$upload-image-size-default});
--p-upload-bg-color: var(--color-neutral-10);
--p-upload-border-color: var(--color-neutral-10);
- --p-upload-icon-color: var(--color-neutral-50);
- --p-upload-text-color: var(--color-neutral-70);
+ --p-upload-icon-color: var(--color-neutral-20);
+ --p-upload-text-color: var(--color-neutral-50);
position:relative; display:grid; place-content:center;
inline-size: var(--p-upload-image-size);
@@ -36,13 +36,13 @@
&.is-finished {
--p-upload-border-color: var(--p-upload-border-color);
.progress{ display:none; }
- #{$theme-dark} & { --p-upload-border-color: var(--color-neutral-150); }
+ #{$theme-dark} & { --p-upload-border-color: var(--color-neutral-80); }
}
/* dark theme */
#{$theme-dark} & {
- --p-upload-bg-color: var(--color-neutral-200);
- --p-upload-border-color: var(--color-neutral-200);
- --p-upload-icon-color: var(--color-neutral-50);
- --p-upload-text-color: var(--color-neutral-50);
+ --p-upload-bg-color: var(--color-neutral-85);
+ --p-upload-border-color: var(--color-neutral-85);
+ --p-upload-icon-color: var(--color-neutral-20);
+ --p-upload-text-color: var(--color-neutral-20);
}
}
\ No newline at end of file
diff --git a/packages/ui/src/7-components/_user-profile.scss b/packages/ui/src/7-components/_user-profile.scss
index f92c08fd8f..693908d6bb 100644
--- a/packages/ui/src/7-components/_user-profile.scss
+++ b/packages/ui/src/7-components/_user-profile.scss
@@ -9,9 +9,9 @@
&-sep { grid-column:span 2; border-block-start:solid pxToRem(1) hsl(var(--color-border)); }
&-button {
/* variables */
- --p-name-color-text: var(--color-neutral-100);
- --p-title-color-text: var(--color-neutral-70);
- --p-icon-color: var(--color-neutral-50);
+ --p-name-color-text: var(--color-neutral-60);
+ --p-title-color-text: var(--color-neutral-50);
+ --p-icon-color: var(--color-neutral-20);
position:relative; z-index:2;
display:flex; block-size:100%; align-items:center; padding-inline:pxToRem(24); gap:pxToRem(12);
@@ -23,8 +23,8 @@
}
#{$theme-dark} & {
--p-name-color-text: var(--color-neutral-5);
- --p-title-color-text: var(--color-neutral-50);
- --p-icon-color: var(--color-neutral-50);
+ --p-title-color-text: var(--color-neutral-20);
+ --p-icon-color: var(--color-neutral-20);
}
}
&-info {
diff --git a/packages/ui/src/8-grids/_grid-1-1.scss b/packages/ui/src/8-grids/_grid-1-1.scss
index dcf980238f..aa72f9db8f 100644
--- a/packages/ui/src/8-grids/_grid-1-1.scss
+++ b/packages/ui/src/8-grids/_grid-1-1.scss
@@ -7,8 +7,8 @@
--p-side-2-color: var(--color-neutral-0);
#{$theme-dark} &{
- --p-side-1-color: var(--color-neutral-300);
- --p-side-2-color: var(--color-neutral-500);
+ --p-side-1-color: var(--color-neutral-90);
+ --p-side-2-color: var(--color-neutral-105);
}
@media #{$break1} {
grid-template-rows:auto 1fr;
diff --git a/packages/ui/src/8-grids/_grid-code.scss b/packages/ui/src/8-grids/_grid-code.scss
index 9d728b7764..5ff4267a74 100644
--- a/packages/ui/src/8-grids/_grid-code.scss
+++ b/packages/ui/src/8-grids/_grid-code.scss
@@ -12,7 +12,7 @@
counter-reset: lineNumbers;
&-line-number {
- color: hsl(var(--color-neutral-70));
+ color: hsl(var(--color-neutral-50));
&::before {
counter-increment: lineNumbers;
content: counter(lineNumbers);
diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss
index 9140351bbd..2b61cfc52b 100644
--- a/packages/ui/src/8-grids/_wizard.scss
+++ b/packages/ui/src/8-grids/_wizard.scss
@@ -87,8 +87,8 @@
#{$theme-dark} & {
- --p-header-color: var(--color-neutral-500);
- --p-start-color: var(--color-neutral-400);
- --p-end-color: var(--color-neutral-300);
+ --p-header-color: var(--color-neutral-105);
+ --p-start-color: var(--color-neutral-100);
+ --p-end-color: var(--color-neutral-90);
}
}
diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
index 92daa9229b..8c9187e149 100644
--- a/packages/ui/src/_9-utilities.scss
+++ b/packages/ui/src/_9-utilities.scss
@@ -62,13 +62,13 @@
/* color text light mode only */
:where(body:not(#{$theme-dark})) {
- .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-70))!important; }
+ .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-50))!important; }
}
/* color text dark mode only */
#{$theme-dark} {
- .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-50))!important; }
+ .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-20))!important; }
}
/* position */
diff --git a/packages/ui/src/abstract/mixins/_scroll.scss b/packages/ui/src/abstract/mixins/_scroll.scss
index 5abe086321..94df142cfb 100644
--- a/packages/ui/src/abstract/mixins/_scroll.scss
+++ b/packages/ui/src/abstract/mixins/_scroll.scss
@@ -26,7 +26,7 @@
@mixin tableScroll {
--p-track-bg-color: var(--track-bg-color, var(--color-neutral-5));
--p-track-border-color: var(--track-border-color, var(--color-neutral-10));
- --p-scroll-bg-color: var(--scroll-bg-color, var(--color-neutral-30));
+ --p-scroll-bg-color: var(--scroll-bg-color, var(--color-neutral-15));
::-webkit-scrollbar {
width: 12px;
}
@@ -45,9 +45,9 @@
}
#{$theme-dark} & {
- --track-bg-color: var(--color-neutral-500);
- --track-border-color: var(--color-neutral-200);
- --scroll-bg-color: var(--color-neutral-150);
+ --track-bg-color: var(--color-neutral-105);
+ --track-border-color: var(--color-neutral-85);
+ --scroll-bg-color: var(--color-neutral-80);
}
}