From 9f6c410bd4189571f7df988de82e5c757e704d73 Mon Sep 17 00:00:00 2001 From: Goran Jovanovic Date: Sun, 28 Nov 2021 12:13:14 +0100 Subject: [PATCH] Cosmetics - Add new default themes purple, violet dark and light version --- packages/angular/package.json | 4 +- packages/core/package.json | 4 +- .../core/src/app/components/app-config.js | 21 ++ packages/core/src/components/badge/badge.scss | 10 +- .../core/src/components/button/button.scss | 2 +- .../src/components/input-text/input-text.scss | 4 + packages/core/src/index.html | 2 +- packages/core/src/themes/anywhere.global.scss | 3 + .../anywhere.theme.default.dark-purple.scss | 271 ++++++++++++++++++ .../anywhere.theme.default.dark-violet.scss | 269 +++++++++++++++++ .../anywhere.theme.default.light-purple.scss | 151 ++++++++++ .../src/themes/anywhere.theme.default.scss | 4 +- packages/react/package.json | 4 +- packages/vue/package.json | 4 +- 14 files changed, 736 insertions(+), 17 deletions(-) create mode 100644 packages/core/src/themes/anywhere.theme.default.dark-purple.scss create mode 100644 packages/core/src/themes/anywhere.theme.default.dark-violet.scss create mode 100644 packages/core/src/themes/anywhere.theme.default.light-purple.scss diff --git a/packages/angular/package.json b/packages/angular/package.json index 223b9f1..4ba0b77 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@anywhere-ui/angular", - "version": "0.2.0+6", + "version": "0.2.0+7", "scripts": { "ng": "ng", "start": "ng serve", @@ -42,5 +42,5 @@ "tslint": "~6.1.0", "typescript": "~4.4.4" }, - "buildnum": "6" + "buildnum": "7" } \ No newline at end of file diff --git a/packages/core/package.json b/packages/core/package.json index 08895ed..2b10ba3 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@anywhere-ui/core", - "version": "0.2.0+6", + "version": "0.2.0+7", "description": "AnywhereUI", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -62,5 +62,5 @@ "build": "^0.1.4", "run": "^1.4.0" }, - "buildnum": "6" + "buildnum": "7" } \ No newline at end of file diff --git a/packages/core/src/app/components/app-config.js b/packages/core/src/app/components/app-config.js index 72473f4..a0195dc 100644 --- a/packages/core/src/app/components/app-config.js +++ b/packages/core/src/app/components/app-config.js @@ -175,6 +175,24 @@ template.innerHTML = ` Violet +
+ + Purple +
+
+ + Violet +
+
+ + Purple +
Bootstrap
@@ -213,6 +231,9 @@ class AppConfig extends HTMLElement { super(); this.logoMap = { 'anywhere-default': 'anywhere-default-violet.png', + 'anywhere-default-dark-violet': 'anywhere-dark-violet.png', + 'anywhere-default-dark-purple': 'anywhere-dark-purple.png', + 'anywhere-default-light-purple': 'anywhere-light-purple.png', 'bootstrap4-light-blue': 'bootstrap4-light-blue.svg', 'bootstrap4-light-purple': 'bootstrap4-light-purple.svg', 'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg', diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss index 26df8a4..2d0f625 100644 --- a/packages/core/src/components/badge/badge.scss +++ b/packages/core/src/components/badge/badge.scss @@ -48,27 +48,27 @@ .any-badge.any-badge-secondary { background-color: var(--secondaryButtonBg) !important; - color: var(--badgeTextColor) !important; + color: var(--secondaryButtonTextColor) !important; } .any-badge.any-badge-success { background-color: var(--successButtonBg) !important; - color: var(--badgeTextColor) !important; + color: var(--successButtonTextColor) !important; } .any-badge.any-badge-info { background-color: var(--infoButtonBg) !important; - color: var(--badgeTextColor) !important; + color: var(--infoButtonTextColor) !important; } .any-badge.any-badge-warning { background-color: var(--warningButtonBg) !important; - color: var(--textColor) !important; + color: var(--warningButtonTextColor) !important; } .any-badge.any-badge-danger { background-color: var(--dangerButtonBg) !important; - color: var(--badgeTextColor) !important; + color: var(--dangerButtonTextColor) !important; } .any-badge.any-badge-lg { diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss index 79b7440..71c1980 100644 --- a/packages/core/src/components/button/button.scss +++ b/packages/core/src/components/button/button.scss @@ -775,7 +775,7 @@ .any-button.any-button-link:enabled:active { background: transparent; - color: var(--buttonActiveBg); + color: var(--buttonBg); border-color: transparent; } } \ No newline at end of file diff --git a/packages/core/src/components/input-text/input-text.scss b/packages/core/src/components/input-text/input-text.scss index 4ee6a12..1dcb32a 100644 --- a/packages/core/src/components/input-text/input-text.scss +++ b/packages/core/src/components/input-text/input-text.scss @@ -20,6 +20,10 @@ margin: 0; outline: medium none; + &::placeholder { + color: var(--inputPlaceholderTextColor); + } + &:not([disabled]) { &:hover { border-color: var(--inputHoverBorderColor); diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 7d5e334..a5be22c 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -100,7 +100,7 @@
-
AnywhereUI v0.2.0+6 by AdaleksTech
+
AnywhereUI v0.2.0+7 by AdaleksTech
diff --git a/packages/core/src/themes/anywhere.global.scss b/packages/core/src/themes/anywhere.global.scss index 9604aba..cb10fa2 100644 --- a/packages/core/src/themes/anywhere.global.scss +++ b/packages/core/src/themes/anywhere.global.scss @@ -1,4 +1,7 @@ @import "./anywhere.theme.default.scss"; +@import "./anywhere.theme.default.dark-violet.scss"; +@import "./anywhere.theme.default.dark-purple.scss"; +@import "./anywhere.theme.default.light-purple.scss"; @import "./anywhere.theme.bootstrap4-light-blue.scss"; @import "./anywhere.theme.bootstrap4-light-purple.scss"; @import "./anywhere.theme.bootstrap4-dark-blue.scss"; diff --git a/packages/core/src/themes/anywhere.theme.default.dark-purple.scss b/packages/core/src/themes/anywhere.theme.default.dark-purple.scss new file mode 100644 index 0000000..c04b162 --- /dev/null +++ b/packages/core/src/themes/anywhere.theme.default.dark-purple.scss @@ -0,0 +1,271 @@ +:root[theme="anywhere-default-dark-purple"], +:root[data-theme="anywhere-default-dark-purple"] { + --surface-a: #1e1e1e; + --surface-b: #121212; + --surface-c: rgba(255, 255, 255, 0.03); + --surface-d: #383838; + --surface-e: #1e1e1e; + --surface-f: #1e1e1e; + --text-color: rgba(255, 255, 255, 0.87); + --text-color-secondary: rgba(255, 255, 255, 0.6); + --primary-color: var(--primaryColor); + --primary-color-text: #ffffff; + --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --surface-0: #121212; + --surface-50: #2a2a2a; + --surface-100: #414141; + --surface-200: #595959; + --surface-300: #717171; + --surface-400: #898989; + --surface-500: #a0a0a0; + --surface-600: #b8b8b8; + --surface-700: #d0d0d0; + --surface-800: #e7e7e7; + --surface-900: #ffffff; + --gray-50: #e7e7e7; + --gray-100: #d0d0d0; + --gray-200: #b8b8b8; + --gray-300: #a0a0a0; + --gray-400: #898989; + --gray-500: #717171; + --gray-600: #595959; + --gray-700: #414141; + --gray-800: #2a2a2a; + --gray-900: #121212; + --content-padding: 1rem; + --inline-spacing: 0.5rem; + --border-radius: 3px; + --surface-ground: #121212; + --surface-section: #121212; + --surface-card: #1e1e1e; + --surface-overlay: #1e1e1e; + --surface-border: #383838; + --surface-hover: rgba(255, 255, 255, .03); + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 1px #cf95d9; +} + +:root[theme="anywhere-default-dark-purple"], +:root[data-theme="anywhere-default-dark-purple"] { + --blue-50: #f4fafe; + --blue-100: #cae6fc; + --blue-200: #a0d2fa; + --blue-300: #75bef8; + --blue-400: #4baaf5; + --blue-500: #2196f3; + --blue-600: #1c80cf; + --blue-700: #1769aa; + --blue-800: #125386; + --blue-900: #0d3c61; + --green-50: #f6fbf6; + --green-100: #d4ecd5; + --green-200: #b2ddb4; + --green-300: #90cd93; + --green-400: #6ebe71; + --green-500: #4caf50; + --green-600: #419544; + --green-700: #357b38; + --green-800: #2a602c; + --green-900: #1e4620; + --yellow-50: #fffcf5; + --yellow-100: #fef0cd; + --yellow-200: #fde4a5; + --yellow-300: #fdd87d; + --yellow-400: #fccc55; + --yellow-500: #fbc02d; + --yellow-600: #d5a326; + --yellow-700: #b08620; + --yellow-800: #8a6a19; + --yellow-900: #644d12; + --cyan-50: #f2fcfd; + --cyan-100: #c2eff5; + --cyan-200: #91e2ed; + --cyan-300: #61d5e4; + --cyan-400: #30c9dc; + --cyan-500: #00bcd4; + --cyan-600: #00a0b4; + --cyan-700: #008494; + --cyan-800: #006775; + --cyan-900: #004b55; + --pink-50: #fef4f7; + --pink-100: #fac9da; + --pink-200: #f69ebc; + --pink-300: #f1749e; + --pink-400: #ed4981; + --pink-500: #e91e63; + --pink-600: #c61a54; + --pink-700: #a31545; + --pink-800: #801136; + --pink-900: #5d0c28; + --indigo-50: #f5f6fb; + --indigo-100: #d1d5ed; + --indigo-200: #acb4df; + --indigo-300: #8893d1; + --indigo-400: #6372c3; + --indigo-500: #3f51b5; + --indigo-600: #36459a; + --indigo-700: #2c397f; + --indigo-800: #232d64; + --indigo-900: #192048; + --teal-50: #f2faf9; + --teal-100: #c2e6e2; + --teal-200: #91d2cc; + --teal-300: #61beb5; + --teal-400: #30aa9f; + --teal-500: #009688; + --teal-600: #008074; + --teal-700: #00695f; + --teal-800: #00534b; + --teal-900: #003c36; + --orange-50: #fff8f2; + --orange-100: #fde0c2; + --orange-200: #fbc791; + --orange-300: #f9ae61; + --orange-400: #f79530; + --orange-500: #f57c00; + --orange-600: #d06900; + --orange-700: #ac5700; + --orange-800: #874400; + --orange-900: #623200; + --bluegray-50: #f7f9f9; + --bluegray-100: #d9e0e3; + --bluegray-200: #bbc7cd; + --bluegray-300: #9caeb7; + --bluegray-400: #7e96a1; + --bluegray-500: #607d8b; + --bluegray-600: #526a76; + --bluegray-700: #435861; + --bluegray-800: #35454c; + --bluegray-900: #263238; + --purple-50: #faf4fb; + --purple-100: #e7cbec; + --purple-200: #d4a2dd; + --purple-300: #c279ce; + --purple-400: #af50bf; + --purple-500: #9c27b0; + --purple-600: #852196; + --purple-700: #6d1b7b; + --purple-800: #561561; + --purple-900: #3e1046; +} + + +:root[theme="anywhere-default-dark-purple"], +:root[data-theme="anywhere-default-dark-purple"] { + //main color scheme + --primaryColor: #966fd6; + --primaryColorRGBValue: 150, 111, 214; + --primaryDarkColor: #835CCC; + --primaryDarkColorRGBValue: 131, 92, 204; + --primaryDarkerColor: #6840BC; + --primaryDarkerColorRGBValue: 104, 64, 188; + --primaryTextColor: #ffffff; + //hsl colors + --primary-color-h: 263; + --primary-color-s: 44%; + --primary-color-l: 64%; + + + --textColor: rgba(255, 255, 255, 0.87); + --textSecondaryColor: rgba(255, 255, 255, 0.6); + + --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%)); + --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor); + + --inputBgColor: #121212; + --inputBorder: 1px solid #383838; + --inputHoverBorderColor: var(--primaryDarkColor); + --inputPlaceholderTextColor: var(--textSecondaryColor); + + --inputListBg: #1e1e1e; + --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04); + --inputListItemHoverTextColor: var(--textColor); + + --inputSwitchSliderOffBg: #383838; + --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03); + --inputSwitchHandleOffBg: var(--textSecondaryColor); + --inputSwitchHandleOnBg: var(--textColor); + + + --checkboxBorder: 2px solid #383838; + + --panelContentBg: #1e1e1e; + + --tabviewNavBg: transparent; + --tabviewNavBorder: 2px solid #383838; + --tabviewHeaderBg: #1e1e1e; + // --tabviewHeaderBorder: solid #383838; + --tabviewHeaderBorderColor: transparent transparent #383838 transparent; + --tabviewHeaderHoverBg: #1e1e1e; + --tabviewHeaderActiveBg: #1e1e1e; + --tabviewHeaderHoverBorderColor: var(--primaryColor); + --tabviewHeaderTextHoverColor: var(--textColor); + + + // buttons + --plainButtonTextColor: var(--textSecondaryColor); + --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03); + --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16); + --secondaryButtonBg: #78909C; + --secondaryButtonTextColor: #ffffff; + --secondaryButtonBorder: 1px solid #78909C; + --secondaryButtonHoverBg: #657D8A; + --secondaryButtonTextHoverColor: #ffffff; + --secondaryButtonHoverBorderColor: #657D8A; + --secondaryButtonActiveBg: #48616E; + --secondaryButtonTextActiveColor: #ffffff; + --secondaryButtonActiveBorderColor: #48616E; + --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%)); + --successButtonBg: #C5E1A5; + --successButtonTextColor: #121212; + --successButtonBorder: 1px solid #C5E1A5; + --successButtonHoverBg: #B8D993; + --successButtonTextHoverColor: #121212; + --successButtonHoverBorderColor: #B8D993; + --successButtonActiveBg: #A3CD79; + --successButtonTextActiveColor: #121212; + --successButtonActiveBorderColor: #A3CD79; + --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%)); + --infoButtonBg: #81D4FA; + --infoButtonTextColor: #121212; + --infoButtonBorder: 1px solid #81D4FA; + --infoButtonHoverBg: #6EC9F9; + --infoButtonTextHoverColor: #121212; + --infoButtonHoverBorderColor: #6EC9F9; + --infoButtonActiveBg: #51B9F6; + --infoButtonTextActiveColor: #121212; + --infoButtonActiveBorderColor: #51B9F6; + --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%)); + --warningButtonBg: #FFE082; + --warningButtonTextColor: #121212; + --warningButtonBorder: 1px solid #FFE082; + --warningButtonHoverBg: #FFD86F; + --warningButtonTextHoverColor: #121212; + --warningButtonHoverBorderColor: #FFD86F; + --warningButtonActiveBg: #FFCB52; + --warningButtonTextActiveColor: #121212; + --warningButtonActiveBorderColor: #FFCB52; + --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%)); + --helpButtonBg: #CE93D8; + --helpButtonTextColor: #121212; + --helpButtonBorder: 1px solid #CE93D8; + --helpButtonHoverBg: #C280CE; + --helpButtonTextHoverColor: #121212; + --helpButtonHoverBorderColor: #C280CE; + --helpButtonActiveBg: #B064BF; + --helpButtonTextActiveColor: #121212; + --helpButtonActiveBorderColor: #B064BF; + --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%)); + --dangerButtonBg: #F48FB1; + --dangerButtonTextColor: #121212; + --dangerButtonBorder: 1px solid #F48FB1; + --dangerButtonHoverBg: #F17CA1; + --dangerButtonTextHoverColor: #121212; + --dangerButtonHoverBorderColor: #F17CA1; + --dangerButtonActiveBg: #EC6088; + --dangerButtonTextActiveColor: #121212; + --dangerButtonActiveBorderColor: #EC6088; + --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%)); + + --badgeTextColor: var(--textColor); +} \ No newline at end of file diff --git a/packages/core/src/themes/anywhere.theme.default.dark-violet.scss b/packages/core/src/themes/anywhere.theme.default.dark-violet.scss new file mode 100644 index 0000000..c74cd2f --- /dev/null +++ b/packages/core/src/themes/anywhere.theme.default.dark-violet.scss @@ -0,0 +1,269 @@ +:root[theme="anywhere-default-dark-violet"], +:root[data-theme="anywhere-default-dark-violet"] { + --surface-a: #1e1e1e; + --surface-b: #121212; + --surface-c: rgba(255, 255, 255, 0.03); + --surface-d: #383838; + --surface-e: #1e1e1e; + --surface-f: #1e1e1e; + --text-color: rgba(255, 255, 255, 0.87); + --text-color-secondary: rgba(255, 255, 255, 0.6); + --primary-color: var(--primaryColor); + --primary-color-text: #ffffff; + --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --surface-0: #121212; + --surface-50: #2a2a2a; + --surface-100: #414141; + --surface-200: #595959; + --surface-300: #717171; + --surface-400: #898989; + --surface-500: #a0a0a0; + --surface-600: #b8b8b8; + --surface-700: #d0d0d0; + --surface-800: #e7e7e7; + --surface-900: #ffffff; + --gray-50: #e7e7e7; + --gray-100: #d0d0d0; + --gray-200: #b8b8b8; + --gray-300: #a0a0a0; + --gray-400: #898989; + --gray-500: #717171; + --gray-600: #595959; + --gray-700: #414141; + --gray-800: #2a2a2a; + --gray-900: #121212; + --content-padding: 1rem; + --inline-spacing: 0.5rem; + --border-radius: 3px; + --surface-ground: #121212; + --surface-section: #121212; + --surface-card: #1e1e1e; + --surface-overlay: #1e1e1e; + --surface-border: #383838; + --surface-hover: rgba(255, 255, 255, .03); + --maskbg: rgba(0, 0, 0, 0.4); + --focus-ring: 0 0 0 1px #cf95d9; +} + +:root[theme="anywhere-default-dark-violet"], +:root[data-theme="anywhere-default-dark-violet"] { + --blue-50: #f4fafe; + --blue-100: #cae6fc; + --blue-200: #a0d2fa; + --blue-300: #75bef8; + --blue-400: #4baaf5; + --blue-500: #2196f3; + --blue-600: #1c80cf; + --blue-700: #1769aa; + --blue-800: #125386; + --blue-900: #0d3c61; + --green-50: #f6fbf6; + --green-100: #d4ecd5; + --green-200: #b2ddb4; + --green-300: #90cd93; + --green-400: #6ebe71; + --green-500: #4caf50; + --green-600: #419544; + --green-700: #357b38; + --green-800: #2a602c; + --green-900: #1e4620; + --yellow-50: #fffcf5; + --yellow-100: #fef0cd; + --yellow-200: #fde4a5; + --yellow-300: #fdd87d; + --yellow-400: #fccc55; + --yellow-500: #fbc02d; + --yellow-600: #d5a326; + --yellow-700: #b08620; + --yellow-800: #8a6a19; + --yellow-900: #644d12; + --cyan-50: #f2fcfd; + --cyan-100: #c2eff5; + --cyan-200: #91e2ed; + --cyan-300: #61d5e4; + --cyan-400: #30c9dc; + --cyan-500: #00bcd4; + --cyan-600: #00a0b4; + --cyan-700: #008494; + --cyan-800: #006775; + --cyan-900: #004b55; + --pink-50: #fef4f7; + --pink-100: #fac9da; + --pink-200: #f69ebc; + --pink-300: #f1749e; + --pink-400: #ed4981; + --pink-500: #e91e63; + --pink-600: #c61a54; + --pink-700: #a31545; + --pink-800: #801136; + --pink-900: #5d0c28; + --indigo-50: #f5f6fb; + --indigo-100: #d1d5ed; + --indigo-200: #acb4df; + --indigo-300: #8893d1; + --indigo-400: #6372c3; + --indigo-500: #3f51b5; + --indigo-600: #36459a; + --indigo-700: #2c397f; + --indigo-800: #232d64; + --indigo-900: #192048; + --teal-50: #f2faf9; + --teal-100: #c2e6e2; + --teal-200: #91d2cc; + --teal-300: #61beb5; + --teal-400: #30aa9f; + --teal-500: #009688; + --teal-600: #008074; + --teal-700: #00695f; + --teal-800: #00534b; + --teal-900: #003c36; + --orange-50: #fff8f2; + --orange-100: #fde0c2; + --orange-200: #fbc791; + --orange-300: #f9ae61; + --orange-400: #f79530; + --orange-500: #f57c00; + --orange-600: #d06900; + --orange-700: #ac5700; + --orange-800: #874400; + --orange-900: #623200; + --bluegray-50: #f7f9f9; + --bluegray-100: #d9e0e3; + --bluegray-200: #bbc7cd; + --bluegray-300: #9caeb7; + --bluegray-400: #7e96a1; + --bluegray-500: #607d8b; + --bluegray-600: #526a76; + --bluegray-700: #435861; + --bluegray-800: #35454c; + --bluegray-900: #263238; + --purple-50: #faf4fb; + --purple-100: #e7cbec; + --purple-200: #d4a2dd; + --purple-300: #c279ce; + --purple-400: #af50bf; + --purple-500: #9c27b0; + --purple-600: #852196; + --purple-700: #6d1b7b; + --purple-800: #561561; + --purple-900: #3e1046; +} + + +:root[theme="anywhere-default-dark-violet"], +:root[data-theme="anywhere-default-dark-violet"] { + //main color scheme + --primaryColor: #c75aae; + --primaryColorRGBValue: 199, 90, 174; + --primaryDarkColor: #BA489D; + --primaryDarkColorRGBValue: 114, 0, 204; + --primaryDarkerColor: #A62E84; + --primaryDarkerColorRGBValue: 85, 0, 153; + --primaryTextColor: #ffffff; + //hsl colors + --primary-color-h: 314; + --primary-color-s: 49%; + --primary-color-l: 57%; + + + --textColor: rgba(255, 255, 255, 0.87); + --textSecondaryColor: rgba(255, 255, 255, 0.6); + + --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%)); + --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor); + + --inputBgColor: #121212; + --inputBorder: 1px solid #383838; + --inputHoverBorderColor: var(--primaryDarkColor); + --inputPlaceholderTextColor: var(--textSecondaryColor); + + --inputListBg: #1e1e1e; + --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04); + --inputListItemHoverTextColor: var(--textColor); + + --inputSwitchSliderOffBg: #383838; + --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03); + --inputSwitchHandleOffBg: var(--textSecondaryColor); + --inputSwitchHandleOnBg: var(--textColor); + + + --checkboxBorder: 2px solid #383838; + + --panelContentBg: #1e1e1e; + + --tabviewNavBg: transparent; + --tabviewNavBorder: 2px solid #383838; + --tabviewHeaderBg: #1e1e1e; + // --tabviewHeaderBorder: solid #383838; + --tabviewHeaderBorderColor: transparent transparent #383838 transparent; + --tabviewHeaderHoverBg: #1e1e1e; + --tabviewHeaderActiveBg: #1e1e1e; + --tabviewHeaderHoverBorderColor: var(--primaryColor); + --tabviewHeaderTextHoverColor: var(--textColor); + + + // buttons + --plainButtonTextColor: var(--textSecondaryColor); + --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03); + --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16); + --secondaryButtonBg: #78909C; + --secondaryButtonTextColor: #ffffff; + --secondaryButtonBorder: 1px solid #78909C; + --secondaryButtonHoverBg: #657D8A; + --secondaryButtonTextHoverColor: #ffffff; + --secondaryButtonHoverBorderColor: #657D8A; + --secondaryButtonActiveBg: #48616E; + --secondaryButtonTextActiveColor: #ffffff; + --secondaryButtonActiveBorderColor: #48616E; + --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%)); + --successButtonBg: #C5E1A5; + --successButtonTextColor: #121212; + --successButtonBorder: 1px solid #C5E1A5; + --successButtonHoverBg: #B8D993; + --successButtonTextHoverColor: #121212; + --successButtonHoverBorderColor: #B8D993; + --successButtonActiveBg: #A3CD79; + --successButtonTextActiveColor: #121212; + --successButtonActiveBorderColor: #A3CD79; + --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%)); + --infoButtonBg: #81D4FA; + --infoButtonTextColor: #121212; + --infoButtonBorder: 1px solid #81D4FA; + --infoButtonHoverBg: #6EC9F9; + --infoButtonTextHoverColor: #121212; + --infoButtonHoverBorderColor: #6EC9F9; + --infoButtonActiveBg: #51B9F6; + --infoButtonTextActiveColor: #121212; + --infoButtonActiveBorderColor: #51B9F6; + --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%)); + --warningButtonBg: #FFE082; + --warningButtonTextColor: #121212; + --warningButtonBorder: 1px solid #FFE082; + --warningButtonHoverBg: #FFD86F; + --warningButtonTextHoverColor: #121212; + --warningButtonHoverBorderColor: #FFD86F; + --warningButtonActiveBg: #FFCB52; + --warningButtonTextActiveColor: #121212; + --warningButtonActiveBorderColor: #FFCB52; + --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%)); + --helpButtonBg: #CE93D8; + --helpButtonTextColor: #121212; + --helpButtonBorder: 1px solid #CE93D8; + --helpButtonHoverBg: #C280CE; + --helpButtonTextHoverColor: #121212; + --helpButtonHoverBorderColor: #C280CE; + --helpButtonActiveBg: #B064BF; + --helpButtonTextActiveColor: #121212; + --helpButtonActiveBorderColor: #B064BF; + --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%)); + --dangerButtonBg: #F48FB1; + --dangerButtonTextColor: #121212; + --dangerButtonBorder: 1px solid #F48FB1; + --dangerButtonHoverBg: #F17CA1; + --dangerButtonTextHoverColor: #121212; + --dangerButtonHoverBorderColor: #F17CA1; + --dangerButtonActiveBg: #EC6088; + --dangerButtonTextActiveColor: #121212; + --dangerButtonActiveBorderColor: #EC6088; + --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%)); +} \ No newline at end of file diff --git a/packages/core/src/themes/anywhere.theme.default.light-purple.scss b/packages/core/src/themes/anywhere.theme.default.light-purple.scss new file mode 100644 index 0000000..ff13a11 --- /dev/null +++ b/packages/core/src/themes/anywhere.theme.default.light-purple.scss @@ -0,0 +1,151 @@ +:root[theme="anywhere-default-light-purple"], +:root[data-theme="anywhere-default-light-purple"] { + --surface-a: #ffffff; + --surface-b: #f8f9fa; + --surface-c: #e9ecef; + --surface-d: #dee2e6; + --surface-e: #ffffff; + --surface-f: #ffffff; + --text-color: #212529; + --text-color-secondary: #6c757d; + --primary-color: var(--primaryColor); + --primary-color-text: #ffffff; + --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, + Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --surface-0: #ffffff; + --surface-50: #f9fafb; + --surface-100: #f8f9fa; + --surface-200: #e9ecef; + --surface-300: #dee2e6; + --surface-400: #ced4da; + --surface-500: #adb5bd; + --surface-600: #6c757d; + --surface-700: #495057; + --surface-800: #343a40; + --surface-900: #212529; + --content-padding: 1.25rem; + --inline-spacing: 0.5rem; + --cog-icon: url('https://api.iconify.design/fa-solid/cog.svg?color=%23ffffff&height=26'); + --times-icon: url('https://api.iconify.design/fa-solid/times.svg?color=%23ffffff&height=20'); +} + +:root[theme="anywhere-default-light-purple"], +:root[data-theme="anywhere-default-light-purple"] { + --blue-50: #f3f8ff; + --blue-100: #c5dcff; + --blue-200: #97c1fe; + --blue-300: #69a5fe; + --blue-400: #3b8afd; + --blue-500: #0d6efd; + --blue-600: #0b5ed7; + --blue-700: #094db1; + --blue-800: #073d8b; + --blue-900: #052c65; + --green-50: #f4f9f6; + --green-100: #c8e2d6; + --green-200: #9ccbb5; + --green-300: #70b595; + --green-400: #459e74; + --green-500: #198754; + --green-600: #157347; + --green-700: #125f3b; + --green-800: #0e4a2e; + --green-900: #0a3622; + --yellow-50: #fffcf3; + --yellow-100: #fff0c3; + --yellow-200: #ffe494; + --yellow-300: #ffd965; + --yellow-400: #ffcd36; + --yellow-500: #ffc107; + --yellow-600: #d9a406; + --yellow-700: #b38705; + --yellow-800: #8c6a04; + --yellow-900: #664d03; + --cyan-50: #f3fcfe; + --cyan-100: #c5f2fb; + --cyan-200: #97e8f9; + --cyan-300: #69def6; + --cyan-400: #3bd4f3; + --cyan-500: #0dcaf0; + --cyan-600: #0baccc; + --cyan-700: #098da8; + --cyan-800: #076f84; + --cyan-900: #055160; + --pink-50: #fdf5f9; + --pink-100: #f5cee1; + --pink-200: #eda7ca; + --pink-300: #e681b3; + --pink-400: #de5a9b; + --pink-500: #d63384; + --pink-600: #b62b70; + --pink-700: #96245c; + --pink-800: #761c49; + --pink-900: #561435; + --indigo-50: #f7f3fe; + --indigo-100: #dac6fc; + --indigo-200: #bd98f9; + --indigo-300: #a06bf7; + --indigo-400: #833df4; + --indigo-500: #6610f2; + --indigo-600: #570ece; + --indigo-700: #470ba9; + --indigo-800: #380985; + --indigo-900: #290661; + --teal-50: #f4fcfa; + --teal-100: #c9f2e6; + --teal-200: #9fe8d2; + --teal-300: #75debf; + --teal-400: #4ad3ab; + --teal-500: #20c997; + --teal-600: #1bab80; + --teal-700: #168d6a; + --teal-800: #126f53; + --teal-900: #0d503c; + --orange-50: #fff9f3; + --orange-100: #ffe0c7; + --orange-200: #fec89a; + --orange-300: #feaf6d; + --orange-400: #fd9741; + --orange-500: #fd7e14; + --orange-600: #d76b11; + --orange-700: #b1580e; + --orange-800: #8b450b; + --orange-900: #653208; + --bluegray-50: #f8f9fb; + --bluegray-100: #e0e4ea; + --bluegray-200: #c7ced9; + --bluegray-300: #aeb9c8; + --bluegray-400: #95a3b8; + --bluegray-500: #7c8ea7; + --bluegray-600: #69798e; + --bluegray-700: #576375; + --bluegray-800: #444e5c; + --bluegray-900: #323943; + --purple-50: #f8f6fc; + --purple-100: #dcd2f0; + --purple-200: #c1aee4; + --purple-300: #a68ad9; + --purple-400: #8a66cd; + --purple-500: #6f42c1; + --purple-600: #5e38a4; + --purple-700: #4e2e87; + --purple-800: #3d246a; + --purple-900: #2c1a4d; +} + + +:root[theme="anywhere-default-light-purple"], +:root[data-theme="anywhere-default-light-purple"] { + //main color scheme + --primaryColor: #9932cc; + --primaryColorRGBValue: 153, 50, 204; + --primaryDarkColor: #8626C0; + --primaryDarkColorRGBValue: 134, 38, 192; + --primaryDarkerColor: #6B13AD; + --primaryDarkerColorRGBValue: 107, 19, 173; + --primaryTextColor: #ffffff; + //hsl colors + --primary-color-h: 280; + --primary-color-s: 61%; + --primary-color-l: 50%; +} \ No newline at end of file diff --git a/packages/core/src/themes/anywhere.theme.default.scss b/packages/core/src/themes/anywhere.theme.default.scss index 961d48e..1840e7f 100644 --- a/packages/core/src/themes/anywhere.theme.default.scss +++ b/packages/core/src/themes/anywhere.theme.default.scss @@ -334,8 +334,8 @@ --buttonActiveBorderColor: var(--primaryDarkerColor); --buttonIconOnlyWidth: 2.357rem; --buttonIconOnlyPadding: .5rem 0; - --linkButtonColor: var(--primaryDarkerColor); - --linkButtonHoverColor: var(--primaryDarkerColor); + --linkButtonColor: var(--primaryColor); + --linkButtonHoverColor: var(--primaryColor); --linkButtonFocusShadow: 0 0 0 0.2rem var(--focusOutlineColor); --linkButtonTextHoverDecoration: underline; --secondaryButtonBg: #607D8B; diff --git a/packages/react/package.json b/packages/react/package.json index 6248bac..5794c8f 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@anywhere-ui/react", "sideEffects": false, - "version": "0.2.0+6", + "version": "0.2.0+7", "description": "React specific wrapper AnywhereUI Web Components library", "license": "MIT", "repository": { @@ -48,5 +48,5 @@ "dist" ] }, - "buildnum": "6" + "buildnum": "7" } \ No newline at end of file diff --git a/packages/vue/package.json b/packages/vue/package.json index 046ade9..a87e638 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,7 +1,7 @@ { "name": "@anywhere-ui/vue", "sideEffects": false, - "version": "0.2.0+6", + "version": "0.2.0+7", "description": "Vue specific wrapper AnywhereUI Web Components", "license": "MIT", "repository": { @@ -42,5 +42,5 @@ "dist" ] }, - "buildnum": "6" + "buildnum": "7" } \ No newline at end of file