feat(showcase): use new brand colors

fpaul-1A · Mar 11, 2024 · f9deb42 · f9deb42
1 parent 45db755
commit f9deb42
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 25 deletions.
diff --git a/apps/showcase/src/app/app.component.scss b/apps/showcase/src/app/app.component.scss
@@ -3,18 +3,18 @@ header {
   top: 0;
   height: 4rem;
   width: 100%;
-  background: var(--bs-primary);
+  background: var(--bs-primary-800);
   box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15);
   z-index: 1021;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  color: var(--bs-primary-bg-subtle);
+  color: var(--bs-primary-500-color);
   font-weight: bold;
   font-size: 2rem;
 
   .mobile-menu-btn {
-    color: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-500-color);
   }
 
   .header-title {

diff --git a/apps/showcase/src/assets/otter-sticker.svg b/apps/showcase/src/assets/otter-sticker.svg
diff --git a/apps/showcase/src/style/dark-theme/dark-theme.figma.json b/apps/showcase/src/style/dark-theme/dark-theme.figma.json
@@ -23,7 +23,7 @@
       },
       "500": {
         "$type": "color",
-        "$value": "#326ce5"
+        "$value": "#0c66e1"
       },
       "600": {
         "$type": "color",

diff --git a/apps/showcase/src/style/dark-theme/dark-theme.scss b/apps/showcase/src/style/dark-theme/dark-theme.scss
@@ -7,13 +7,12 @@
 --bs-primary-800: var(--color-primary-800);
 .nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
 .navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
-.nav.nav-pills .nav-link { --bs-scrollspy-active-color: var(--color-primary-800); }
 --color-primary-50: #e6edfc;
 --color-primary-100: #c2d3f7;
 --color-primary-200: #99b6f2;
 --color-primary-300: #7098ed;
 --color-primary-400: #5182e9;
---color-primary-500: #326ce5;
+--color-primary-500: #0c66e1;
 --color-primary-600: #2d64e2;
 --color-primary-700: #2659de;
 --color-primary-800: #1f4fda;
@@ -99,6 +98,14 @@
 .card { --bs-card-bg: #000000; }
 /* --- END THEME Auto-generated --- */
 
-.nav.nav-pills .nav-link { --bs-scrollspy-color: #ffffff; }
-.nav-pills { --bs-nav-pills-link-active-bg: transparent; }
+  .nav.nav-pills .nav-link {
+    --bs-scrollspy-color: #ffffff;
+    --bs-nav-pills-link-active-bg: transparent;
+  }
+  .input-group-text {
+    background-color: var(--bs-tertiary-bg);
+  }
+  .form-select {
+    --bs-form-select-bg-img: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' viewBox='0 0 1792 1792' style='fill%3a%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
+  }
 }
diff --git a/apps/showcase/src/style/design-token.app.json b/apps/showcase/src/style/design-token.app.json
@@ -26,15 +26,6 @@
           "o3rScope": ".navbar-toggler"
         }
       }
-    },
-    "scrollspy": {
-      "active-color": {
-        "$type": "color",
-        "$value": "{color.primary.800}",
-        "$extensions": {
-          "o3rScope": ".nav.nav-pills .nav-link"
-        }
-      }
     }
   }
 }
diff --git a/apps/showcase/src/style/design-token.figma.json b/apps/showcase/src/style/design-token.figma.json
@@ -23,7 +23,7 @@
       },
       "500": {
         "$type": "color",
-        "$value": "#326ce5"
+        "$value": "#0c66e1"
       },
       "600": {
         "$type": "color",
@@ -35,7 +35,7 @@
       },
       "800": {
         "$type": "color",
-        "$value": "#1f4fda"
+        "$value": "#000835"
       },
       "900": {
         "$type": "color",

diff --git a/apps/showcase/src/style/horizon-theme/horizon-theme.scss b/apps/showcase/src/style/horizon-theme/horizon-theme.scss
@@ -6,7 +6,6 @@
 --bs-primary-800: var(--color-primary-800);
 .nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
 .navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
-.nav.nav-pills .nav-link { --bs-scrollspy-active-color: var(--color-primary-800); }
 --color-primary-50: #f0e4ea;
 --color-primary-100: #d8bbca;
 --color-primary-200: #bf8da6;

diff --git a/apps/showcase/src/style/theme.scss b/apps/showcase/src/style/theme.scss
@@ -6,16 +6,15 @@
 --bs-primary-800: var(--color-primary-800);
 .nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
 .navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
-.nav.nav-pills .nav-link { --bs-scrollspy-active-color: var(--color-primary-800); }
 --color-primary-50: #e6edfc;
 --color-primary-100: #c2d3f7;
 --color-primary-200: #99b6f2;
 --color-primary-300: #7098ed;
 --color-primary-400: #5182e9;
---color-primary-500: #326ce5;
+--color-primary-500: #0c66e1;
 --color-primary-600: #2d64e2;
 --color-primary-700: #2659de;
---color-primary-800: #1f4fda;
+--color-primary-800: #000835;
 --color-primary-900: #133dd3;
 --color-primary-A700: #839aff;
 --color-primary-A400: #9caeff;

diff --git a/package.json b/package.json
@@ -133,7 +133,7 @@
     "@types/node": "^20.0.0",
     "jasmine-marbles/rxjs": "^7.8.1",
     "git-url-parse": "^14.0.0",
-    "gonzales-pe-sl/minimist": "^1.2.0",
+    "gonzales-pe-sl/minimist": "^1.2.6",
     "typescript-json-schema/typescript": "~5.3.3"
   },
   "dependencies": {