From c3d26b9127f8cc24c46d11ffefb98d6fa7e133c0 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 2 Nov 2023 10:12:00 -0500 Subject: [PATCH 1/4] Colors - update to new colors - update variables name --- apps/pink/public/prismjs.css | 2 +- apps/pink/src/components/CodeEditor.svelte | 4 +- apps/pink/src/components/IconsGrid.astro | 4 +- apps/pink/src/components/JoinCommunity.svelte | 2 +- apps/pink/src/components/Search.svelte | 2 +- .../src/components/homepage/TryItOut.svelte | 2 +- apps/pink/src/layouts/Layout.astro | 6 +- .../pink/src/pages/foundations/dark-theme.mdx | 12 ++-- apps/pink/src/pages/index.astro | 12 ++-- packages/ui/src/1-css-variables/_colors.scss | 42 ++++++------ packages/ui/src/1-css-variables/_shadows.scss | 4 +- packages/ui/src/2-resets/_typography.scss | 8 +-- packages/ui/src/6-elements/_avatar.scss | 24 +++---- packages/ui/src/6-elements/_box.scss | 10 +-- packages/ui/src/6-elements/_button.scss | 50 +++++++------- packages/ui/src/6-elements/_card.scss | 12 ++-- packages/ui/src/6-elements/_image-item.scss | 4 +- packages/ui/src/6-elements/_inline-code.scss | 6 +- packages/ui/src/6-elements/_inline-tag.scss | 6 +- packages/ui/src/6-elements/_kbd.scss | 8 +-- packages/ui/src/6-elements/_loader.scss | 6 +- packages/ui/src/6-elements/_table.scss | 16 ++--- packages/ui/src/6-elements/_tag.scss | 42 ++++++------ packages/ui/src/6-elements/_tooltip.scss | 2 +- packages/ui/src/6-elements/form/_helper.scss | 4 +- .../form/_interactive-text-output.scss | 6 +- packages/ui/src/6-elements/form/_label.scss | 2 +- .../ui/src/6-elements/form/_optional.scss | 2 +- .../ui/src/6-elements/form/_placeholder.scss | 10 +-- .../6-elements/form/_radio-and-checkbox.scss | 42 ++++++------ packages/ui/src/6-elements/form/_switch.scss | 12 ++-- .../ui/src/6-elements/form/_tags-input.scss | 18 ++--- .../ui/src/6-elements/form/_text-inputs.scss | 68 +++++++++---------- packages/ui/src/7-components/_action-bar.scss | 8 +-- .../ui/src/7-components/_alert-sticky.scss | 8 +-- packages/ui/src/7-components/_alert.scss | 14 ++-- .../ui/src/7-components/_breadcrumbs.scss | 6 +- .../ui/src/7-components/_buttons-list.scss | 4 +- .../ui/src/7-components/_clickable-list.scss | 16 ++--- packages/ui/src/7-components/_code-panel.scss | 4 +- .../ui/src/7-components/_collapsible.scss | 6 +- packages/ui/src/7-components/_drop.scss | 16 ++--- .../ui/src/7-components/_file-preview.scss | 8 +-- .../ui/src/7-components/_grid-item-1.scss | 2 +- packages/ui/src/7-components/_list.scss | 12 ++-- .../ui/src/7-components/_main-header.scss | 2 +- packages/ui/src/7-components/_modal.scss | 20 +++--- packages/ui/src/7-components/_pagination.scss | 4 +- .../ui/src/7-components/_progress-bar.scss | 18 ++--- .../ui/src/7-components/_secondary-tabs.scss | 6 +- packages/ui/src/7-components/_side-nav.scss | 6 +- packages/ui/src/7-components/_status.scss | 4 +- packages/ui/src/7-components/_steps.scss | 40 +++++------ packages/ui/src/7-components/_tabs.scss | 8 +-- .../ui/src/7-components/_toggle-button.scss | 16 ++--- packages/ui/src/7-components/_top-cover.scss | 2 +- packages/ui/src/7-components/_upload-box.scss | 14 ++-- .../ui/src/7-components/_upload-file-box.scss | 20 +++--- .../ui/src/7-components/_upload-image.scss | 14 ++-- .../ui/src/7-components/_user-profile.scss | 10 +-- packages/ui/src/8-grids/_grid-1-1.scss | 4 +- packages/ui/src/8-grids/_grid-code.scss | 2 +- packages/ui/src/8-grids/_wizard.scss | 6 +- packages/ui/src/_9-utilities.scss | 4 +- packages/ui/src/abstract/mixins/_scroll.scss | 8 +-- 65 files changed, 381 insertions(+), 381 deletions(-) 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..cf6603d7b7 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-110) / 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/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..69dd560379 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-110); } } @@ -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..d88f913849 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-110: 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 727989ae37..d72db51d70 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-small: #{$shadow-small}; @@ -10,7 +10,7 @@ --shadow-large: #{$shadow-large}; #{$theme-dark} { - --shadow-color: var(--color-neutral-500); + --shadow-color: var(--color-neutral-110); $shadow-small: pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5); --shadow-small: #{$shadow-small}; diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss index 1451bd2d2f..472134f76e 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-110); } } @@ -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 a736ebf701..dbdd898917 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-110); } } \ 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 92f7198d15..d931db4f32 100644 --- a/packages/ui/src/6-elements/_loader.scss +++ b/packages/ui/src/6-elements/_loader.scss @@ -1,7 +1,7 @@ @use '../abstract' as *; .loader { --p-base-color: var(--color-neutral-10); - --p-base-full-color: var(--color-neutral-50); + --p-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)}); @@ -20,7 +20,7 @@ /* Theme Dark */ #{$theme-dark} & { - --p-base-color: var(--color-neutral-120); - --p-base-full-color: var(--color-neutral-50); + --p-base-color: var(--color-neutral-70); + --p-base-full-color: var(--color-neutral-20); } } \ 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 00df128e37..e8f495d3a6 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 a44bd34e55..97f1814122 100644 --- a/packages/ui/src/6-elements/form/_radio-and-checkbox.scss +++ b/packages/ui/src/6-elements/form/_radio-and-checkbox.scss @@ -14,13 +14,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); @@ -35,11 +35,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 b17f736fee..ea5a1cb928 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 e6396e7b90..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,36 +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); + --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); } } } } @@ -187,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; } @@ -241,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 { @@ -264,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..30efafa14a 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-110)); } } \ 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 41958e3d12..8313425c71 100644 --- a/packages/ui/src/7-components/_code-panel.scss +++ b/packages/ui/src/7-components/_code-panel.scss @@ -1,8 +1,8 @@ @use "../abstract" as *; .code-panel { - --p-code-panel-header: var(--color-neutral-200); - --p-code-panel-content: var(--color-neutral-300); + --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; diff --git a/packages/ui/src/7-components/_collapsible.scss b/packages/ui/src/7-components/_collapsible.scss index 810f3fb2ec..cb5b6e4cf6 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; } @@ -28,6 +28,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..06a0a01115 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-110); + --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..88b2b6d457 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-110); } @media #{$break1}, #{$break2} { diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss index 5bb97f1006..7154baafa5 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-110); + --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 1b613048fb..5f46fb26f0 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)); @@ -76,9 +76,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-110); - --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 6ca0c94709..0983b995ad 100644 --- a/packages/ui/src/7-components/_steps.scss +++ b/packages/ui/src/7-components/_steps.scss @@ -3,13 +3,13 @@ --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); --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); @@ -19,13 +19,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 { @@ -88,22 +88,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..ebe435d612 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-110); } @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 f6d372452f..bbf29e5486 100644 --- a/packages/ui/src/8-grids/_wizard.scss +++ b/packages/ui/src/8-grids/_wizard.scss @@ -79,8 +79,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-110); + --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 c7c7bbafab..3303bc21c8 100644 --- a/packages/ui/src/_9-utilities.scss +++ b/packages/ui/src/_9-utilities.scss @@ -61,13 +61,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..ca93a07989 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-110); + --track-border-color: var(--color-neutral-85); + --scroll-bg-color: var(--color-neutral-80); } } From 9c5c04abf2307547c29a727bdb428e8f1194139b Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 2 Nov 2023 11:30:56 -0500 Subject: [PATCH 2/4] Colors - update demo pages of colors --- apps/pink/src/pages/foundations/colors.mdx | 40 +++++++++++----------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/pink/src/pages/foundations/colors.mdx b/apps/pink/src/pages/foundations/colors.mdx index 614933ae6b..04634265e7 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-110

    • From 76e0df1637fb5259b2a35c9807cbb3e6e1bb7c1b Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 2 Nov 2023 14:55:07 -0500 Subject: [PATCH 3/4] Colors - update color 110 to 105 --- apps/pink/src/components/IconsGrid.astro | 2 +- apps/pink/src/pages/foundations/colors.mdx | 4 ++-- apps/pink/src/pages/index.astro | 2 +- packages/ui/src/1-css-variables/_colors.scss | 2 +- packages/ui/src/1-css-variables/_shadows.scss | 2 +- packages/ui/src/2-resets/_typography.scss | 2 +- packages/ui/src/6-elements/_avatar.scss | 2 +- packages/ui/src/7-components/_action-bar.scss | 2 +- packages/ui/src/7-components/_drop.scss | 2 +- packages/ui/src/7-components/_main-header.scss | 2 +- packages/ui/src/7-components/_modal.scss | 2 +- packages/ui/src/7-components/_side-nav.scss | 2 +- packages/ui/src/8-grids/_grid-1-1.scss | 2 +- packages/ui/src/8-grids/_wizard.scss | 2 +- packages/ui/src/abstract/mixins/_scroll.scss | 2 +- 15 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/pink/src/components/IconsGrid.astro b/apps/pink/src/components/IconsGrid.astro index cf6603d7b7..5f3fe2455f 100644 --- a/apps/pink/src/components/IconsGrid.astro +++ b/apps/pink/src/components/IconsGrid.astro @@ -78,7 +78,7 @@ const removePublic = (path: string) => path.replace("/public", ""); } :global(.theme-dark) .copy-overlay { - --bg-clr: hsl(var(--color-neutral-110) / 90%); + --bg-clr: hsl(var(--color-neutral-105) / 90%); --clr: white; } diff --git a/apps/pink/src/pages/foundations/colors.mdx b/apps/pink/src/pages/foundations/colors.mdx index 04634265e7..f6fadc3647 100644 --- a/apps/pink/src/pages/foundations/colors.mdx +++ b/apps/pink/src/pages/foundations/colors.mdx @@ -117,8 +117,8 @@ Pink Design's neutral palette is used for both light and dark mode. Neutrals are

    ~-~-color-neutral-100

  • -
    -

    ~-~-color-neutral-110

    +
    +

    ~-~-color-neutral-105

    • diff --git a/apps/pink/src/pages/index.astro b/apps/pink/src/pages/index.astro index 69dd560379..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-110); + --p-body-bg-color: var(--color-neutral-105); } } diff --git a/packages/ui/src/1-css-variables/_colors.scss b/packages/ui/src/1-css-variables/_colors.scss index d88f913849..5c0e71b980 100644 --- a/packages/ui/src/1-css-variables/_colors.scss +++ b/packages/ui/src/1-css-variables/_colors.scss @@ -22,7 +22,7 @@ --color-neutral-85: 240 4% 18%; /* #2D2D31 */ --color-neutral-90: 240 7% 12%; /* #1D1D21 */ --color-neutral-100: 240 6% 10%; /* #19191C */ - --color-neutral-110: 240 5% 8%; /* #141416 */ + --color-neutral-105: 240 5% 8%; /* #141416 */ /** Information **/ --color-information-hue: 189; diff --git a/packages/ui/src/1-css-variables/_shadows.scss b/packages/ui/src/1-css-variables/_shadows.scss index d72db51d70..279bdbf072 100644 --- a/packages/ui/src/1-css-variables/_shadows.scss +++ b/packages/ui/src/1-css-variables/_shadows.scss @@ -10,7 +10,7 @@ --shadow-large: #{$shadow-large}; #{$theme-dark} { - --shadow-color: var(--color-neutral-110); + --shadow-color: var(--color-neutral-105); $shadow-small: pxToRem(0) pxToRem(16) pxToRem(32) hsl(var(--shadow-color) / 0.5); --shadow-small: #{$shadow-small}; diff --git a/packages/ui/src/2-resets/_typography.scss b/packages/ui/src/2-resets/_typography.scss index 472134f76e..f83921cefe 100644 --- a/packages/ui/src/2-resets/_typography.scss +++ b/packages/ui/src/2-resets/_typography.scss @@ -25,7 +25,7 @@ body { &#{$theme-dark} { --p-body-text-color: var(--color-neutral-20); - --p-body-bg-color: var(--color-neutral-110); + --p-body-bg-color: var(--color-neutral-105); } } diff --git a/packages/ui/src/6-elements/_avatar.scss b/packages/ui/src/6-elements/_avatar.scss index dbdd898917..2b9dac3896 100644 --- a/packages/ui/src/6-elements/_avatar.scss +++ b/packages/ui/src/6-elements/_avatar.scss @@ -227,6 +227,6 @@ border-width:pxToRem(1); } #{$theme-dark} & { - --p-avatar-group-border-color: var(--color-neutral-110); + --p-avatar-group-border-color: var(--color-neutral-105); } } \ No newline at end of file diff --git a/packages/ui/src/7-components/_action-bar.scss b/packages/ui/src/7-components/_action-bar.scss index 30efafa14a..85ad12e082 100644 --- a/packages/ui/src/7-components/_action-bar.scss +++ b/packages/ui/src/7-components/_action-bar.scss @@ -19,6 +19,6 @@ #{$theme-dark} & { --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-110)); + --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/_drop.scss b/packages/ui/src/7-components/_drop.scss index 06a0a01115..39fb869f0e 100644 --- a/packages/ui/src/7-components/_drop.scss +++ b/packages/ui/src/7-components/_drop.scss @@ -148,7 +148,7 @@ } #{$theme-dark} &{ - --p-drop-bg-color: var(--color-neutral-110); + --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-15); diff --git a/packages/ui/src/7-components/_main-header.scss b/packages/ui/src/7-components/_main-header.scss index 88b2b6d457..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-110); + --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 7154baafa5..0330c2c788 100644 --- a/packages/ui/src/7-components/_modal.scss +++ b/packages/ui/src/7-components/_modal.scss @@ -38,7 +38,7 @@ --padding-header-bottom: #{$header-padding-bottom}; } &.is-inner-modal { - --p-modal-title-color: var(--color-neutral-110); + --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); diff --git a/packages/ui/src/7-components/_side-nav.scss b/packages/ui/src/7-components/_side-nav.scss index 5f46fb26f0..2aa80fde83 100644 --- a/packages/ui/src/7-components/_side-nav.scss +++ b/packages/ui/src/7-components/_side-nav.scss @@ -76,7 +76,7 @@ .eyebrow-heading-3 { color: var(--p-side-nav-header-text-color); } #{$theme-dark} & { - --p-side-nav-bg-color: var(--color-neutral-110); + --p-side-nav-bg-color: var(--color-neutral-105); --p-side-nav-header-text-color: var(--color-neutral-20); } diff --git a/packages/ui/src/8-grids/_grid-1-1.scss b/packages/ui/src/8-grids/_grid-1-1.scss index ebe435d612..aa72f9db8f 100644 --- a/packages/ui/src/8-grids/_grid-1-1.scss +++ b/packages/ui/src/8-grids/_grid-1-1.scss @@ -8,7 +8,7 @@ #{$theme-dark} &{ --p-side-1-color: var(--color-neutral-90); - --p-side-2-color: var(--color-neutral-110); + --p-side-2-color: var(--color-neutral-105); } @media #{$break1} { grid-template-rows:auto 1fr; diff --git a/packages/ui/src/8-grids/_wizard.scss b/packages/ui/src/8-grids/_wizard.scss index bbf29e5486..c8cf6c3040 100644 --- a/packages/ui/src/8-grids/_wizard.scss +++ b/packages/ui/src/8-grids/_wizard.scss @@ -79,7 +79,7 @@ #{$theme-dark} & { - --p-header-color: var(--color-neutral-110); + --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/abstract/mixins/_scroll.scss b/packages/ui/src/abstract/mixins/_scroll.scss index ca93a07989..94df142cfb 100644 --- a/packages/ui/src/abstract/mixins/_scroll.scss +++ b/packages/ui/src/abstract/mixins/_scroll.scss @@ -45,7 +45,7 @@ } #{$theme-dark} & { - --track-bg-color: var(--color-neutral-110); + --track-bg-color: var(--color-neutral-105); --track-border-color: var(--color-neutral-85); --scroll-bg-color: var(--color-neutral-80); } From 49c8015c2d19c263fc8d9d571ee7e2e0e39f1e61 Mon Sep 17 00:00:00 2001 From: Elad Shechter Date: Thu, 16 Nov 2023 10:07:33 -0300 Subject: [PATCH 4/4] Loader - Fix color issue (light/dark mode) --- apps/pink/src/pages/elements/loader.mdx | 4 ++-- packages/ui/src/6-elements/_loader.scss | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) 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/packages/ui/src/6-elements/_loader.scss b/packages/ui/src/6-elements/_loader.scss index 36ed3d3bcc..4764d11e21 100644 --- a/packages/ui/src/6-elements/_loader.scss +++ b/packages/ui/src/6-elements/_loader.scss @@ -50,7 +50,8 @@ /* Theme Dark */ #{$theme-dark} & { - --p-base-color: var(--color-neutral-70); - --p-base-full-color: var(--color-neutral-20); + --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