Pass theme along with default props

undeletable · May 7, 2024 · 3926bc9 · 3926bc9
1 parent 164ac90
commit 3926bc9
Show file tree

Hide file tree

Showing 31 changed files with 866 additions and 557 deletions.
diff --git a/src/js/__tests__/__snapshots__/default-props-test.js.snap b/src/js/__tests__/__snapshots__/default-props-test.js.snap
@@ -110,7 +110,8 @@ exports[`uses Grommet theme instead of default 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background: red;
+  background-color: #7D4CDB;
+  color: #f8f8f8;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -119,8 +120,11 @@ exports[`uses Grommet theme instead of default 1`] = `
 }
 
 .c0 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 18px;
   line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;

diff --git a/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap b/src/js/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap
@@ -3906,7 +3906,7 @@ exports[`Accordion complex title 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  border-bottom: solid 1px rgba(0,0,0,0.33);
+  border-bottom: solid 1px rgba(255,255,255,0.33);
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -3998,7 +3998,7 @@ exports[`Accordion complex title 1`] = `
 
 @media only screen and (max-width:768px) {
   .c8 {
-    border-bottom: solid 1px rgba(0,0,0,0.33);
+    border-bottom: solid 1px rgba(255,255,255,0.33);
   }
 }
 

diff --git a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap
@@ -991,7 +991,7 @@ exports[`Anchor renders a11yTitle and aria-label 1`] = `
 
 exports[`Anchor renders size specific theming 1`] = `
 <DocumentFragment>
-  .c17 {
+  .c18 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1002,30 +1002,30 @@ exports[`Anchor renders size specific theming 1`] = `
   stroke: #000000;
 }
 
-.c17 g {
+.c18 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c17 *:not([stroke])[fill='none'] {
+.c18 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c17 *[stroke*='#'],
-.c17 *[STROKE*='#'] {
+.c18 *[stroke*='#'],
+.c18 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c17 *[fill-rule],
-.c17 *[FILL-RULE],
-.c17 *[fill*='#'],
-.c17 *[FILL*='#'] {
+.c18 *[fill-rule],
+.c18 *[FILL-RULE],
+.c18 *[fill*='#'],
+.c18 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
 
-.c19 {
+.c20 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -1036,25 +1036,25 @@ exports[`Anchor renders size specific theming 1`] = `
   stroke: #7D4CDB;
 }
 
-.c19 g {
+.c20 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c19 *:not([stroke])[fill='none'] {
+.c20 *:not([stroke])[fill='none'] {
   stroke-width: 0;
 }
 
-.c19 *[stroke*='#'],
-.c19 *[STROKE*='#'] {
+.c20 *[stroke*='#'],
+.c20 *[STROKE*='#'] {
   stroke: inherit;
   fill: none;
 }
 
-.c19 *[fill-rule],
-.c19 *[FILL-RULE],
-.c19 *[fill*='#'],
-.c19 *[FILL*='#'] {
+.c20 *[fill-rule],
+.c20 *[FILL-RULE],
+.c20 *[fill*='#'],
+.c20 *[FILL*='#'] {
   fill: inherit;
   stroke: none;
 }
@@ -1083,7 +1083,7 @@ exports[`Anchor renders size specific theming 1`] = `
   flex-direction: column;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1101,7 +1101,7 @@ exports[`Anchor renders size specific theming 1`] = `
   flex-direction: row;
 }
 
-.c18 {
+.c19 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -1119,10 +1119,10 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: 12px;
   line-height: 18px;
-  color: #7D4CDB;
-  font-weight: 600;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -1139,10 +1139,10 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: 14px;
   line-height: 20px;
-  color: #7D4CDB;
-  font-weight: 600;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -1159,10 +1159,10 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: 18px;
   line-height: 24px;
-  color: #7D4CDB;
-  font-weight: 600;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   cursor: pointer;
 }
 
@@ -1180,7 +1180,7 @@ exports[`Anchor renders size specific theming 1`] = `
   font-size: 22px;
   line-height: 28px;
   color: #7D4CDB;
-  font-weight: 600;
+  font-weight: 500;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1200,7 +1200,7 @@ exports[`Anchor renders size specific theming 1`] = `
   font-size: 26px;
   line-height: 32px;
   color: #7D4CDB;
-  font-weight: 600;
+  font-weight: 500;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1220,7 +1220,7 @@ exports[`Anchor renders size specific theming 1`] = `
   font-size: 34px;
   line-height: 40px;
   color: #7D4CDB;
-  font-weight: 600;
+  font-weight: 500;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1239,14 +1239,34 @@ exports[`Anchor renders size specific theming 1`] = `
   display: inline-flex;
   font-size: inherit;
   line-height: inherit;
-  color: #7D4CDB;
-  font-weight: 600;
+  color: #000000;
+  font-weight: 700;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.c15:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c16 {
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: inherit;
+  line-height: inherit;
+  color: #000000;
+  font-weight: 700;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.c15:hover {
+.c16:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -1427,14 +1447,14 @@ exports[`Anchor renders size specific theming 1`] = `
       Default anchor with no size prop should receive medium
     </a>
     <a
-      class="c15"
+      class="c16"
     >
       <span
-        class="c16"
+        class="c17"
       >
         <svg
           aria-label="LinkNext"
-          class="c17"
+          class="c18"
           viewBox="0 0 24 24"
         >
           <path
@@ -1445,7 +1465,7 @@ exports[`Anchor renders size specific theming 1`] = `
           />
         </svg>
         <span
-          class="c18"
+          class="c19"
         />
         Anchor with icon
       </span>
@@ -1454,11 +1474,11 @@ exports[`Anchor renders size specific theming 1`] = `
       class="c8"
     >
       <span
-        class="c16"
+        class="c17"
       >
         <svg
           aria-label="LinkNext"
-          class="c19"
+          class="c20"
           viewBox="0 0 24 24"
         >
           <path
@@ -1469,7 +1489,7 @@ exports[`Anchor renders size specific theming 1`] = `
           />
         </svg>
         <span
-          class="c18"
+          class="c19"
         />
         Large anchor with icon should receive color on icon
       </span>

diff --git a/src/js/components/Box/__tests__/__snapshots__/Box-style-test.tsx.snap b/src/js/components/Box/__tests__/__snapshots__/Box-style-test.tsx.snap
@@ -826,7 +826,7 @@ exports[`Box background clip 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background-image: gradient-1;
+  background-image: linear-gradient( hsl(240deg 90% 55%) 0%, hsl(341deg 90% 55%) 50%, hsl(60deg 90% 55%) 100%);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
@@ -881,7 +881,7 @@ exports[`Box background from theme 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  background: gradient-1;
+  background: linear-gradient( hsl(240deg 90% 55%) 0%, hsl(341deg 90% 55%) 50%, hsl(60deg 90% 55%) 100%);
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -916,7 +916,7 @@ exports[`Box background from theme 1`] = `
   z-index: -1;
   border-radius: inherit;
   background-color: red;
-  background-image: image-2;
+  background-image: url(https://images.unsplash.com/photo-1603484477859-abe6a73f9366?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
@@ -1649,6 +1649,21 @@ exports[`Box elevation 1`] = `
   box-shadow: 0px 2px 4px rgba(0,0,0,0.20);
 }
 
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  box-shadow: 0px 4px 4px rgba(255,255,255,0.40);
+}
+
 <div
   class="c0"
 >
@@ -1674,7 +1689,7 @@ exports[`Box elevation 1`] = `
     class="c7"
   >
     <div
-      class="c3"
+      class="c8"
     />
   </div>
 </div>