Design tokens for Tooltip component

.storybook/emulsifyTheme.js

@@ -35,6 +35,6 @@ export default create({
   brandTitle: 'Emulsify',
   brandUrl: 'https://emulsify.info',
   brandImage:
-    'https://raw.githubusercontent.com/emulsify-ds/emulsify-ui-kit/storybook-theming/images/emulsify-logo-sb.svg',
+    'https://raw.githubusercontent.com/emulsify-ds/emulsify-ui-kit/main/src/images/logo.svg',
   brandTarget: '_self',
 });

src/components/accordion/_accordion.scss

@@ -51,22 +51,22 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
   cursor: pointer;
   outline: inherit;
   display: flex;
-  color: var(--colors-text-body);
+  color: var(--color-text-body);
   font-size: var(--font-size-body);
   gap: var(--spacing-sm);
   align-items: center;
 
   .accordion__icon {
-    fill: var(--colors-text-body);
+    fill: var(--color-text-body);
     height: var(--size-lg);
     width: var(--size-lg);
   }
 
   &:hover {
-    color: var(--accordion-color-header-hover);
+    color: var(--accordion-color-header);
 
     .accordion__icon {
-      fill: var(--accordion-color-header-hover);
+      fill: var(--accordion-color-header);
     }
   }
 }
@@ -95,16 +95,28 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
   color: var(--accordion-color-header);
   margin: 0 0 $accordion_padding_y;
 
+  [data-accordion-expanded='false'] & {
+    color: var(--accordion-color-body);
+  }
+
   &:hover {
     color: var(--accordion-color-header-hover);
 
+    [data-accordion-expanded='false'] & {
+      color: var(--accordion-color-header);
+
+      .accordion-item__toggle {
+        color: var(--accordion-color-header);
+      }
+    }
+
     .accordion-item__icon {
       fill: var(--accordion-color-header-hover);
-    }
-  }
 
-  [data-accordion-expanded='false'] & {
-    color: var(--accordion-color-body);
+      [data-accordion-expanded='false'] & {
+        fill: var(--accordion-color-header);
+      }
+    }
   }
 }
 
@@ -117,6 +129,7 @@ $accordion_padding_y: calc(var(--spacing-lg) * 1.25);
 
   [aria-expanded='true'] > & {
     transform: rotate(180deg);
+    fill: var(--accordion-color-header);
   }
 }
 

src/components/docs/examples/_basic.scss

@@ -0,0 +1,33 @@
+.example {
+  .basic {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: var(--spacing-2xl) 0;
+
+    h1.page-title {
+      margin-block-start: 0;
+      margin-block-end: var(--spacing-2xl);
+    }
+
+    h2 {
+      line-height: var(--line-height-tight);
+    }
+
+    p {
+      line-height: var(--line-height-relaxed);
+    }
+
+    .faux-form {
+      .two-col {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--spacing-2xl);
+        margin-block-end: var(--spacing-lg);
+      }
+    }
+  }
+
+  &.basic .header {
+    border-bottom: 40px solid var(--color-primary-default);
+  }
+}

src/components/docs/examples/_home.scss

@@ -3,9 +3,8 @@
 .example {
   display: flex;
   flex-flow: column nowrap;
-  background-color: var(--colors-white);
+  background-color: var(--color-white);
   padding: 0 !important;
-  // max-width: var(--max-width);
   margin: 0 auto;
   min-height: 100vh;
 
@@ -21,11 +20,11 @@
   }
 
   .logo-text {
-    fill: var(--colors-text-body);
+    fill: var(--color-text-body);
   }
 
   .logo-mark {
-    fill: var(--colors-primary-darker);
+    fill: var(--color-primary-default);
   }
 
   .logo + nav {
@@ -36,7 +35,7 @@
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
-    color: var(--colors-white);
+    color: var(--color-white);
     aspect-ratio: 16/7;
     background-size: cover;
     text-align: center;
@@ -46,7 +45,7 @@
     &::after {
       content: '';
       position: absolute;
-      background: var(--colors-primary-dark);
+      background: var(--color-primary-dark);
       top: 0;
       left: 0;
       bottom: 0;
@@ -62,21 +61,23 @@
 
     h1 {
       font-size: var(--font-size-uber);
-      line-height: var(--line-heights-none);
+      line-height: var(--line-height-none);
       letter-spacing: var(--letter-spacing-tight);
-      max-width: 1000px;
-      margin: 0 auto;
+      margin: 0 auto var(--spacing-lg);
     }
 
     h2 {
       font-size: var(--font-size-display);
-      line-height: var(--line-heights-none);
+      line-height: var(--line-height-none);
       letter-spacing: var(--letter-spacing-tight);
       max-width: 1000px;
       margin: 0 auto;
     }
   }
 
+  /**
+   * Watch section
+   */
   .watch {
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
@@ -98,7 +99,7 @@
   }
 
   .celebrating {
-    background: var(--colors-primary-lighter);
+    background: var(--color-primary-lighter);
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
 
@@ -120,8 +121,8 @@
   }
 
   .footer {
-    background: var(--colors-primary-darker);
-    color: var(--colors-white);
+    background: var(--color-primary-darker);
+    color: var(--color-white);
     padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
     margin-top: auto;
     display: flex;
@@ -137,11 +138,11 @@
     }
 
     .logo-text {
-      fill: var(--colors-white);
+      fill: var(--color-white);
     }
 
     .logo-mark {
-      fill: var(--colors-primary-lighter);
+      fill: var(--color-white);
     }
 
     .social-menu--footer {
@@ -150,11 +151,11 @@
     }
 
     .social-menu--footer .social-menu__link {
-      color: var(--colors-primary-lighter);
+      color: var(--color-primary-lighter);
       font-size: var(--font-size-display);
 
       &:hover {
-        color: var(--colors-primary-light);
+        color: var(--color-primary-light);
       }
     }
 
@@ -168,7 +169,7 @@
     }
 
     .footer-h3 {
-      color: var(--colors-primary-lighter);
+      color: var(--color-primary-lighter);
       font-size: var(--font-size-body);
     }
 
@@ -179,7 +180,7 @@
       max-width: 450px;
       font-size: var(--font-size-small);
       gap: var(--spacing-lg);
-      line-height: var(--line-heights-tight);
+      line-height: var(--line-height-tight);
 
       li {
         margin-bottom: var(--spacing-sm);

src/components/docs/examples/_program.scss

@@ -1,6 +1,6 @@
 .example {
   .dynamic {
-    background: var(--colors-primary-lighter);
+    background: var(--color-primary-lighter);
     text-align: center;
     padding: var(--spacing-2xl) var(--spacing-xl);
 

src/components/docs/examples/assets/_header.twig

@@ -1,5 +1,5 @@
 <header class="header">
 	{% include "@components/docs/examples/assets/_logo.twig" %}
 	{% include "@components/menus/main-menu/main-menu.twig" %}
-	{% include "@components/button/button.twig" with { button__content: 'Donate' } %}
+	{% include "@components/button/button.twig" with { button__content: 'Apply' } %}
 </header>

src/components/docs/examples/basic.stories.js

@@ -0,0 +1,13 @@
+import template from './basic.twig';
+import image from '../../../images/example/basic-camera-image.png';
+import data from './basic.yml';
+
+export default {
+  title: 'Pages/Basic',
+  decorators: [
+    (story) =>
+      `<div style="background: var(--color-grays-700); padding: 0;margin:0;">${story()}</div>`,
+  ],
+};
+
+export const Basic = () => template({ data, image });

src/components/docs/examples/basic.twig

@@ -0,0 +1,42 @@
+<div class="example basic">
+	{% include "@components/docs/examples/assets/_header.twig" %}
+	<main class="basic text-long">
+		{% include "@components/menus/breadcrumbs/breadcrumbs.twig" with {
+			breadcrumb: data.breadcrumb
+		} %}
+		<h1 class="page-title">Undergraduate Courses</h1>
+		<h2>Unveiling the Rich Tapestry of Film History</h2>
+		<p>In the first semester, students embark on a captivating journey through time, exploring the evolution of cinema from its early beginnings to the present day. They delve into the works of influential filmmakers, iconic films, and significant movements, cultivating a deep appreciation for the artistic, cultural, and social impact of cinema.</p>
+
+		<img src="{{_context.image}}" alt="" style="margin: var(--spacing-xl) 0"/>
+
+		<h2>Analyzing Films: Unraveling the Layers of Meaning</h2>
+		<p>Diving into the realm of film theory, aesthetics, and analysis, students develop the skills to interpret films through multiple lenses. They delve into narrative structures, visual storytelling techniques, and the nuanced role of cinematography, sound, and editing. Through rigorous analysis and thought-provoking discussions, students gain a profound understanding of the intricate layers of meaning embedded within films.</p>
+		<h2>Hands-On Filmmaking Experience: From Vision to Creation</h2>
+		<p>Empowering students with practical skills, our program offers hands-on production courses where they transform their creative visions into reality. From scriptwriting to directing, cinematography to editing, students master the technical aspects of filmmaking. Collaborating with fellow students, they navigate the complexities of teamwork, effective communication, and project organization.</p>
+		<p>Our program goes beyond the classroom, providing valuable industry insights and connections. Guest lectures, workshops, and internships offer students opportunities to learn from and network with professionals in the field. Through these engagements, students gain real-world perspectives, understand industry trends, and lay the foundation for future career opportunities.</p>
+		<p>In the final semesters, students have the freedom to specialize in areas of interest. Whether it's documentary filmmaking, film criticism, or screenwriting, advanced courses refine their skills and knowledge, empowering them to delve deeper into their chosen field. The program culminates in a capstone project, where students showcase their expertise through a comprehensive film analysis, research paper, or creative work.</p>
+		<p>Led by passionate faculty and supported by state-of-the-art facilities, our Film Studies program offers a transformative educational experience. Students emerge with a profound appreciation for cinema's artistic power, a strong foundation in critical thinking and analysis, and the practical skills required to succeed in the film industry or pursue further academic studies in the field. Join us on this remarkable journey of cinematic exploration and discovery.</p>
+
+		<section class="faux-form">
+			<h2>Fill out this form</h2>
+			<div class="two-col">
+				<div class="form-item">
+					<label for="edit-name" class="form-item__label form-item__label--required form-item__label--textfield">Name</label>
+					<input id="edit-name" autocorrect="none" autocapitalize="none" spellcheck="false" type="text" name="name" value="" size="60" maxlength="60" class="form-item__textfield form-item__textfield--required" required="required" aria-required="true" placeholder="First, Middle, Last">
+				</div>
+				<div class="form-item">
+					<label for="emailaddress" class="form-item__label form-item__label--textfield">Email Address</label>
+					<input id="emailaddress" type="email" class="form-item__textfield" placeholder="[email protected]">
+				</div>
+			</div>
+
+			{% include "@components/button/button.twig" with { button__content: 'Apply today' } %}
+
+		</section>
+
+
+	</main>
+	{% include "@components/docs/examples/assets/_footer.twig" %}
+
+</div>

src/components/docs/examples/basic.yml

@@ -0,0 +1,5 @@
+breadcrumb:
+  - url: '#'
+    text: 'Home'
+  - url: '#'
+    text: 'Your Education'

src/components/docs/examples/home.stories.js

@@ -21,7 +21,7 @@ export default {
   title: 'Pages/Home',
   decorators: [
     (story) =>
-      `<div style="background: var(--colors-grays-700); padding: 0;">${story()}</div>`,
+      `<div style="background: var(--color-grays-700); padding: 0;margin:0;">${story()}</div>`,
   ],
 };
 

src/components/docs/examples/home.twig

@@ -2,8 +2,8 @@
 	{% include "@components/docs/examples/assets/_header.twig" %}
 	<main>
 		<section class="hero" style="background-image: url({{_context.heroImage}})">
-			<h1>The Future of Education</h1>
-			<h2>Innovative Approaches for Tomorrow's Learners</h2>
+			<h1>Future of Education</h1>
+			<h2>Innovative Approaches for Tomorrow&rsquo;s Learners</h2>
 		</section>
 
 		<section class="watch">