6984 - Added new color tokens to tailwind
This commit is contained in:
Simon Fessehaye
Родитель
d949f21f60
Коммит
9a592451e3
|
|
@ -3,7 +3,7 @@
|
|||
<h3>{{ title }}</h3>
|
||||
{% if category_url %}
|
||||
<div class="tw-mt-3">
|
||||
<a class="tw-underline tw-text-blue tw-body" href="{{ category_url }}">{{ category_title }}</a>
|
||||
<a class="tw-underline tw-text-blue-40 tw-body" href="{{ category_url }}">{{ category_title }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div>
|
||||
<h1 class="tw-text-white tw-font-bold tw-mb-5">{{ page.banner_heading }}</h1>
|
||||
{% if page.banner_video and page.banner_cta_label %}
|
||||
<button id="mozfest-hero-video-cta" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-blue hover:tw-text-white">{{ page.banner_cta_label }}</button>
|
||||
<button id="mozfest-hero-video-cta" class="btn btn-primary tw-bg-white tw-text-black hover:tw-bg-blue-40 hover:tw-text-white">{{ page.banner_cta_label }}</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{% load i18n %}
|
||||
<div class="cont-scrolling tw-w-full tw-h-screen tw-bg-blue-lightest tw-sticky tw-z-[2000] tw-overflow-hidden" data-href="{{ page.url }}">
|
||||
<div class="cont-scrolling tw-w-full tw-h-screen tw-bg-blue-05 tw-sticky tw-z-[2000] tw-overflow-hidden" data-href="{{ page.url }}">
|
||||
<div class="tw-container tw-py-6">
|
||||
<div class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-text-black" >
|
||||
<div class="tw-font-sans tw-text-xs tw-uppercase tw-mb-3 tw-tracking-wide">
|
||||
{% trans "Keep Scrolling For" context "String followed by the next page title the user will reach by scrolling down" %}
|
||||
</div>
|
||||
<a href="{{ page.url }}" class="tw-h4-heading tw-text-center tw-text-black hover:tw-text-blue-dark hover:tw-no-underline scrolling-link">{{ page.title }}</a>
|
||||
<a href="{{ page.url }}" class="tw-h4-heading tw-text-center tw-text-black hover:tw-text-blue-80 hover:tw-no-underline scrolling-link">{{ page.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw-w-full tw-h-screen tw-bg-white tw-absolute tw-top-0 tw-right-0 outro-screen tw-grid tw-place-items-center" style="transform:translateY(100%)">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
{% block left_banner_column %}
|
||||
<div class="medium:tw-w-6/12 large:tw-w-6/12 tw-px-4">
|
||||
<p class="tw-h2-heading tw-mb-0 tw-text-blue-dark tw-font-semibold tw-italic">
|
||||
<p class="tw-h2-heading tw-mb-0 tw-text-blue-80 tw-font-semibold tw-italic">
|
||||
{% trans "Help Mozilla fight for a better internet this holiday season" %}
|
||||
</p>
|
||||
<p class="tw-body-large tw-mt-4 tw-leading-normal">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<footer role="contentinfo">
|
||||
{% if skip_donate != True %}
|
||||
{% block footer_donate %}
|
||||
<div class="tw-bg-blue tw-dark print:tw-hidden {{wrapper_class}}">
|
||||
<div class="tw-bg-blue-40 tw-dark print:tw-hidden {{wrapper_class}}">
|
||||
<div class="tw-container tw-mt-5">
|
||||
<div class="tw-row">
|
||||
<div class="tw-w-full tw-px-4">
|
||||
|
|
@ -49,14 +49,14 @@
|
|||
<div class="large:tw-w-6/12 xlarge:tw-w-7/12 tw-px-4">
|
||||
<ul class="tw-p-0 tw-ml-0 tw-list-none tw-mb-0 link-list large:tw-columns-2">
|
||||
{% block general_links %}
|
||||
<li class="tw-mb-2"><a id="donate-footer-btn" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=footer" target="_blank" rel="noopener noreferrer" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Donate" %}</a></li>
|
||||
<li class="tw-mb-2"><a id="donate-footer-btn" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=footer" target="_blank" rel="noopener noreferrer" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Donate" %}</a></li>
|
||||
<!-- the rest of the links should be listed alphabetically -->
|
||||
<li class="tw-mb-2"><a href="https://careers.mozilla.org/listings/?team=Mozilla%20Foundation" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Careers" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Cookies" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/about/legal/terms/mozilla/" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Legal" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Participation Guidelines" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://foundation.mozilla.org/en/press-center/" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Press Center" %}</a></li>
|
||||
<li ><a href="https://mozilla.org/privacy/websites/" class="tw-dark tw-text-white hover:tw-text-blue-light hover:tw-underline">{% trans "Privacy" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://careers.mozilla.org/listings/?team=Mozilla%20Foundation" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Careers" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Cookies" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/about/legal/terms/mozilla/" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Legal" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Participation Guidelines" %}</a></li>
|
||||
<li class="tw-mb-2"><a href="https://foundation.mozilla.org/en/press-center/" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Press Center" %}</a></li>
|
||||
<li ><a href="https://mozilla.org/privacy/websites/" class="tw-dark tw-text-white hover:tw-text-blue-20 hover:tw-underline">{% trans "Privacy" %}</a></li>
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
<div class="tw-w-[98vw] tw-relative tw-left-1/2 tw-ml-[-51vw] large:tw-left-auto large:tw-ml-0 large:tw-static large:tw-w-full">
|
||||
<div class="tw-px-4 large:tw-px-0 tw-flex tw-space-x-2 tw-overflow-auto tw-pb-2 tw-no-scrollbar subcategory-header">
|
||||
{% for cat in categories %}
|
||||
{% with original=cat.original selected_classes="active tw-bg-gray-80 tw-text-white tw-border-gray-80" default_classes="hover:tw-border-pni-lilac hover:tw-bg-pni-lilac tw-text-gray-60 tw-border-gray-20 tw-bg-white" tailwind_classes="tw-no-underline border tw-px-2 tw-py-1 tw-font-sans tw-rounded-3xl tw-font-normal tw-text-[12px] tw-leading-[1.3] tw-whitespace-nowrap" %}
|
||||
{% with original=cat.original selected_classes="active tw-bg-gray-80 tw-text-white tw-border-gray-80" default_classes="hover:tw-border-blue-10 hover:tw-bg-blue-10 tw-text-gray-60 tw-border-gray-20 tw-bg-white" tailwind_classes="tw-no-underline border tw-px-2 tw-py-1 tw-font-sans tw-rounded-3xl tw-font-normal tw-text-[12px] tw-leading-[1.3] tw-whitespace-nowrap" %}
|
||||
{% if cat.parent != None %}
|
||||
{% if original.published_product_page_count > 0 %}
|
||||
{% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<h3 class="tw-font-sans tw-text-base tw-leading-5 tw-font-normal my-0">
|
||||
<a href="{{ child.url }}" class="d-block tw-text-black hover:tw-no-underline hover:tw-text-blue-dark">
|
||||
<a href="{{ child.url }}" class="d-block tw-text-black hover:tw-no-underline hover:tw-text-blue-80">
|
||||
{{ child.title }} {% if child.has_unpublished_changes %}🐣{% endif %}
|
||||
</a>
|
||||
</h3>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
<div class="article-child-menu row tw-divide-y tw-divide-gray-20 tw-hidden" data-expand="{{child.title}}">
|
||||
{% for slug, header in child.get_page_titles %}
|
||||
<div class="tw-flex tw-py-3 tw-px-4 medium:tw-px-4 tw-items-center tw-bg-gray-05 tw-w-full tw-min-h-[80px]">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-dark tw-flex tw-items-center" href="{{ child.url }}#{{ slug }}">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-80 tw-flex tw-items-center" href="{{ child.url }}#{{ slug }}">
|
||||
{{ header }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
group
|
||||
tw-p-0">
|
||||
<img class="tw-scale-x-[-1] tw-mr-2" src="{% static "_images/arrow-circle.svg" %}" alt="" />
|
||||
<span class="group-hover:tw-text-blue-dark tw-text-xs tw-leading-5 tw-font-normal tw-font-sans tw-uppercase tw-truncate tw-max-w-sm">{{ child_page.title }}</span>
|
||||
<span class="group-hover:tw-text-blue-80 tw-text-xs tw-leading-5 tw-font-normal tw-font-sans tw-uppercase tw-truncate tw-max-w-sm">{{ child_page.title }}</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<h3 class="tw-font-sans tw-text-base tw-leading-5 tw-font-normal my-0">
|
||||
<a href="{{ grandchild_page.url }}" class="d-block tw-text-black hover:tw-no-underline hover:tw-text-blue-dark">
|
||||
<a href="{{ grandchild_page.url }}" class="d-block tw-text-black hover:tw-no-underline hover:tw-text-blue-80">
|
||||
{{ grandchild_page.title }} {% if grandchild_page.has_unpublished_changes %}🐣{% endif %}
|
||||
</a>
|
||||
</h3>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="article-child-menu row tw-divide-y tw-divide-gray-20 tw-hidden" data-expand="{{grandchild_page.title}}">
|
||||
{% for slug, header in grandchild_page.get_page_titles %}
|
||||
<div class="tw-flex tw-min-h-[80px] tw-py-3 tw-px-4 medium:tw-px-4 tw-items-center tw-bg-gray-05 tw-w-full">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-dark tw-flex tw-items-center" href="{{ grandchild_page.url }}#{{ slug }}">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-80 tw-flex tw-items-center" href="{{ grandchild_page.url }}#{{ slug }}">
|
||||
{{ header }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="tw-divide-y tw-divide-gray-20 tw-flex tw-flex-col tw-pb-6">
|
||||
{% for grandchild_page in child_page.get_children.specific %}
|
||||
<div class="tw-flex tw-py-3 tw-px-4 medium:tw-px-[3.5rem] large:tw-px-7 tw-items-center">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-dark tw-flex tw-items-center tw-mr-3" href="{{ child_page.url }}">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-80 tw-flex tw-items-center tw-mr-3" href="{{ child_page.url }}">
|
||||
<img class="tw-w-7 tw-h-7 tw-bg-cover tw-mr-4 tw-shrink-0"
|
||||
{% with toc_image=grandchild_page.toc_thumbnail_image %}
|
||||
{% if toc_image %}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<div class="article-child-menu tw-divide-y tw-divide-gray-20 tw-hidden" data-expand="{{grandchild_page.title}}">
|
||||
{% for slug, header in grandchild_page.get_page_titles %}
|
||||
<div class="tw-flex tw-py-3 tw-px-4 medium:tw-px-[3.5rem] large:tw-px-7 tw-items-center tw-bg-gray-05">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-dark tw-flex tw-items-center" href="{{ grandchild_page.url }}#{{ slug }}">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-80 tw-flex tw-items-center" href="{{ grandchild_page.url }}#{{ slug }}">
|
||||
{{ header }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="tw-divide-y tw-divide-gray-20 tw-flex tw-flex-col tw-pb-6">
|
||||
{% for child_page in page.get_parent.get_children.specific %}
|
||||
<div class="tw-flex tw-py-3 first:tw-pt-0 tw-px-4 medium:tw-px-[3.5rem] large:tw-px-7 tw-items-center">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-dark tw-flex tw-items-center tw-mr-3" href="{{ child_page.url }}">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-80 tw-flex tw-items-center tw-mr-3" href="{{ child_page.url }}">
|
||||
|
||||
<img class="tw-w-7 tw-h-7 tw-bg-cover tw-mr-4 tw-shrink-0"
|
||||
{% with toc_image=child_page.toc_thumbnail_image %}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<div class="article-child-menu tw-divide-y tw-divide-gray-20 tw-hidden" data-expand="{{child_page.title}}">
|
||||
{% for slug, header in child_page.get_page_titles %}
|
||||
<div class="tw-flex tw-py-3 tw-px-4 medium:tw-px-[3.5rem] large:tw-px-7 tw-items-center tw-bg-gray-05">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-dark tw-flex tw-items-center" href="{{ child_page.url }}#{{ slug }}">
|
||||
<a class="tw-whitespace-normal tw-text-black hover:tw-no-underline hover:tw-text-blue-80 tw-flex tw-items-center" href="{{ child_page.url }}#{{ slug }}">
|
||||
{{ header }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
</div>
|
||||
<div class="tw-divide-y tw-divide-gray-20 tw-flex tw-flex-col tw-pb-6">
|
||||
{% for slug, header in get_titles %}
|
||||
<a class="tw-whitespace-normal tw-py-5 tw-px-4 medium:tw-px-[3.5rem] large:tw-px-7 tw-text-black hover:tw-no-underline hover:tw-text-blue" href="#{{ slug }}">{{ header }}</a>
|
||||
<a class="tw-whitespace-normal tw-py-5 tw-px-4 medium:tw-px-[3.5rem] large:tw-px-7 tw-text-black hover:tw-no-underline hover:tw-text-blue-40" href="#{{ slug }}">{{ header }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@
|
|||
{% if get_titles %}
|
||||
{# If there are h2s in the body of this page, show the article "table of contents" #}
|
||||
<div class="tw-w-[calc(80%+60px)] mx-auto tw-mb-7 tw--mt-7 tw-border tw-border-gray-20">
|
||||
<div class="tw-body-small tw-bg-blue-lightest tw-px-6 large:tw-px-7 tw-py-4">{% trans "SUMMARY" %}</div>
|
||||
<div class="tw-body-small tw-bg-blue-05 tw-px-6 large:tw-px-7 tw-py-4">{% trans "SUMMARY" %}</div>
|
||||
<div class="tw-bg-white tw-columns-1 article-column-rule tw-p-6 large:tw-px-7 {% if get_titles|length > 5 %} medium:tw-columns-2 {% endif %}">
|
||||
{% for slug, header in get_titles %}
|
||||
<a href="#{{ slug }}" class="tw-block tw-text-black tw-mb-4 hover:tw-text-blue-dark hover:tw-no-underline tw-break-inside-avoid-column" >{{ header }}</a>
|
||||
<a href="#{{ slug }}" class="tw-block tw-text-black tw-mb-4 hover:tw-text-blue-80 hover:tw-no-underline tw-break-inside-avoid-column" >{{ header }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
href="{{ card.value.link.0.value.link_url }}">
|
||||
|
||||
<div class="tw-order-2 medium:tw-order-1 tw-flex-1">
|
||||
<span class="tw-h5-heading tw-text-blue tw-underline tw-mb-4 medium:mb-4 group-hover:tw-text-blue-dark tw-font-zilla tw-font-semibold">{{ card.value.title }}</span>
|
||||
<span class="tw-h5-heading tw-text-blue-40 tw-underline tw-mb-4 medium:mb-4 group-hover:tw-text-blue-80 tw-font-zilla tw-font-semibold">{{ card.value.title }}</span>
|
||||
<p class="tw-body">{{ card.value.body }}</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
Otherwise the metadata will be at full width and driving this elements width.
|
||||
-->
|
||||
<div class="tw-min-w-0">
|
||||
<h{% firstof heading_level '2' %} class="tw-h5-heading tw-text-blue-dark tw-mb-2"><a href="{% pageurl research_detail_page %}">{{ research_detail_page.title}}</a></h{% firstof heading_level '2' %}>
|
||||
<h{% firstof heading_level '2' %} class="tw-h5-heading tw-text-blue-80 tw-mb-2"><a href="{% pageurl research_detail_page %}">{{ research_detail_page.title}}</a></h{% firstof heading_level '2' %}>
|
||||
<div class="tw-flex tw-flex-row tw-text-xs tw-text-gray-80 tw-mb-2 tw-uppercase tw-divide-x tw-divide-gray-20">
|
||||
{% if research_detail_page.original_publication_date %}
|
||||
<div class="tw-pr-2 tw-whitespace-nowrap ">{{ research_detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="tw-relative">
|
||||
<label for="search" class="tw-sr-only">{% translate 'Search' context 'Button' %}</label>
|
||||
<input type="text" value="{{ search_query }}" name="search" id="search" placeholder="{% translate 'Search our research' context 'Search input' %}..." class="tw-w-full form-control tw-h-auto tw-p-4 tw-pr-7 tw-border-gray-40 tw-rounded-none" />
|
||||
<button type="submit" class="tw-absolute -tw-translate-y-1/2 tw-top-1/2 tw-right-3 tw-text-blue-dark tw-bg-transparent">
|
||||
<button type="submit" class="tw-absolute -tw-translate-y-1/2 tw-top-1/2 tw-right-3 tw-text-blue-80 tw-bg-transparent">
|
||||
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" stroke="currentColor"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="-14.5" cy="9" r="8" transform="scale(-1 1)"/><path d="m8.682 14.818-7.682 7.682" transform="matrix(-1 0 0 -1 9.682 37.318)"/></g></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
<ul class="tw-list-none tw-px-0 tw-grid tw-grid-cols-12 tw-gap-0 medium:tw-gap-5 large:tw-gap-0">
|
||||
{% for featured_topic in page.featured_topics.all %}
|
||||
<li class="tw-py-1 tw-col-span-12 medium:tw-col-span-4 large:tw-col-span-12">
|
||||
<h2 class="tw-h5-heading tw-text-blue-dark tw-mb-1">
|
||||
<h2 class="tw-h5-heading tw-text-blue-80 tw-mb-1">
|
||||
<a href="{% pageurl library_page %}?topic={{featured_topic.research_topic.id}}">{{featured_topic.research_topic.name }}</a>
|
||||
</h2>
|
||||
<p class="tw-body tw-text-gray-80 tw-text-base medium:tw-text-xs large:tw-text-base tw-pt-1"> {{ featured_topic.research_topic.description }}</p>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
<div class="tw-flex tw-justify-end">
|
||||
<button
|
||||
id="filter-section-hide-button"
|
||||
class="tw-hidden large:tw-hidden tw-h-7 tw-w-7 -tw-mt-2 -tw-mr-2 -tw-mb-4 tw-text-3xl tw-font-normal tw-text-blue-dark hover:tw-text-blue-light tw-bg-transparent"
|
||||
class="tw-hidden large:tw-hidden tw-h-7 tw-w-7 -tw-mt-2 -tw-mr-2 -tw-mb-4 tw-text-3xl tw-font-normal tw-text-blue-80 hover:tw-text-blue-20 tw-bg-transparent"
|
||||
aria-label="Close"
|
||||
tabIndex="0"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -37,21 +37,115 @@
|
|||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-light" name="Light Red ($light-red)" hex="#ffe6e8" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-05" name="Red 05" hex="#ffe6e8" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red" name="Red ($red)" hex="#ff4f5e" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-10" name="Red 10" hex="#ffb4ba" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-20" name="Red 20" hex="#ff818c" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-dark" name="Dark Red ($dark-red)" hex="#cc0011" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-40" name="Red 40" hex="#ff4f5e" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-60" name="Red 60" hex="#e62434" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-80" name="Red 80" hex="#cc0011" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-red-100" name="Red 100" hex="#9a000e" %}
|
||||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-lightest" name="Lightest Blue ($lightest-blue)" hex="#e7e7fc" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-05" name="Blue 05" hex="#e7e7fc" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-light" name="Light Blue ($light-blue)" hex="#b7b9fa" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-10" name="Blue 10" hex="#d3d5fc" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-20" name="Blue 20" hex="#b7b9fa" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue" name="Blue ($blue)" hex="#595cf3" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-40" name="Blue 40" hex="#595cf3" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-dark" name="Dark Blue ($dark-blue)" hex="#0d10bf" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-60" name="Blue 60" hex="#3032d9" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-80" name="Blue 80" hex="#0d10bf" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-blue-100" name="Blue 100" hex="#0003a6" %}
|
||||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-05" name="Cyan 05" hex="#e6ffff" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-10" name="Cyan 10" hex="#acffff" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-20" name="Cyan 20" hex="#73ffff" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-40" name="Cyan 40" hex="#00ffff" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-60" name="Cyan 60" hex="#00c9c9" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-80" name="Cyan 80" hex="#009494" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-cyan-100" name="Cyan 100" hex="#005e5e" %}
|
||||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-05" name="Green 05" hex="#d8fff0" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-10" name="Green 10" hex="#acffe0" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-20" name="Green 20" hex="#80ffce" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-40" name="Green 40" hex="#54ffbd" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-60" name="Green 60" hex="#2cc98e" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-80" name="Green 80" hex="#109462" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-green-100" name="Green 100" hex="#005e3a" %}
|
||||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-05" name="Yellow 05" hex="#fffcd9" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-10" name="Yellow 10" hex="#fff9ab" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-20" name="Yellow 20" hex="#fff67d" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-40" name="Yellow 40" hex="#fff44f" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-60" name="Yellow 60" hex="#e5d92f" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-80" name="Yellow 80" hex="#ccbf15" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-yellow-100" name="Yellow 100" hex="#b2a600" %}
|
||||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-05" name="Purple 05" hex="#ecd8fe" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-10" name="Purple 10" hex="#deb8fe" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-20" name="Purple 20" hex="#cd97fd" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-40" name="Purple 40" hex="#8f14fb" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-60" name="Purple 60" hex="#760bd4" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-80" name="Purple 80" hex="#5e05ac" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-purple-100" name="Purple 100" hex="#470085" %}
|
||||
</div>
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-05" name="Pink 05" hex="#ecd8fe" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-10" name="Pink 10" hex="#deb8fe" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-20" name="Pink 20" hex="#cd97fd" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-40" name="Pink 40" hex="#8f14fb" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-60" name="Pink 60" hex="#760bd4" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-80" name="Pink 80" hex="#5e05ac" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pink-100" name="Pink 100" hex="#470085" %}
|
||||
</div>
|
||||
|
||||
<h3 class="tw-h2-heading tw-mt-7 tw-group" id="pni-palette">
|
||||
|
|
@ -61,8 +155,6 @@
|
|||
<hr />
|
||||
|
||||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-lilac" name="PNI Lilac ($pni-lilac)" hex="#d3d5fc" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-blue" name="PNI Blue ($pni-blue)" hex="#1808f2" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-pni-blue-purple" name="PNI Blue Purple ($pni-blue-purple)" hex="#4a17d4" %}
|
||||
|
|
@ -85,9 +177,7 @@
|
|||
<div class="tw-row">
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-festival-blue" name="Festival Dark Blue ($festival-dark-blue)" hex="#0e11bf" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-festival-purple" name="Festival Purple ($festival-purple)" hex="#8f14fb" %}
|
||||
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gradient-to-r tw-from-festival-blue tw-to-festival-purple" name="Festival Gradient ($festival-gradient)" hex="linear-gradient(120deg, #0e11bf 0%, #8f14fb 100%)" %}
|
||||
{% include "../fragments/styleguide_color_block.html" with classname="tw-bg-gradient-to-r tw-from-festival-blue tw-to-purple-40" name="Festival Gradient ($festival-gradient)" hex="linear-gradient(120deg, #0e11bf 0%, #8f14fb 100%)" %}
|
||||
</div>
|
||||
|
||||
<h2 class="tw-h1-heading tw-mt-7 tw-group" id="spacing">
|
||||
|
|
@ -115,42 +205,42 @@
|
|||
<tr class="">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">1px</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-px tw-h-px"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-px tw-h-px"></div></td>
|
||||
</tr>
|
||||
<tr class="tw-bg-black tw-bg-opacity-5">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">1</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">4px (0.25rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-1 tw-h-1"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-1 tw-h-1"></div></td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">2</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">8px (0.5rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-2 tw-h-2"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-2 tw-h-2"></div></td>
|
||||
</tr>
|
||||
<tr class="tw-bg-black tw-bg-opacity-5">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">3</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">12px (0.75rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-3 tw-h-3"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-3 tw-h-3"></div></td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">4</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">16px (1rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-4 tw-h-4"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-4 tw-h-4"></div></td>
|
||||
</tr>
|
||||
<tr class="tw-bg-black tw-bg-opacity-5">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">5</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">24px (1.5rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-5 tw-h-5"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-5 tw-h-5"></div></td>
|
||||
</tr>
|
||||
<tr class="">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">6</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">32px (2rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-6 tw-h-6"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-6 tw-h-6"></div></td>
|
||||
</tr>
|
||||
<tr class="tw-bg-black tw-bg-opacity-5">
|
||||
<td class="tw-p-3 tw-border tw-border-table tw-font-bold">7</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table">48px (3rem)</td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red tw-w-7 tw-h-7"></div></td>
|
||||
<td class="tw-p-3 tw-border tw-border-table"><div class="tw-bg-red-40 tw-w-7 tw-h-7"></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
|
||||
<input type="text" name="userPhone" placeholder="{% trans "Your phone number" %}" class="{{ inputclass }}"
|
||||
data-pattern="^\d{10}$" aria-label="{% trans "Please enter a ten digit US phone number" %}">
|
||||
<p class="tw-body-small tw-text-red-dark tw-hidden">{% trans "Please enter a ten digit US phone number" %}</p>
|
||||
<p class="tw-body-small tw-text-red-80 tw-hidden">{% trans "Please enter a ten digit US phone number" %}</p>
|
||||
|
||||
<input type="text" name="userZipCode" placeholder="{% trans "Your zipcode" %}" class="{{ inputclass }}"
|
||||
data-pattern="^\d{5}$" aria-label="{% trans "Please enter a five digit US zip code" %}">
|
||||
<p class="tw-body-small tw-text-red-dark tw-hidden">{% trans "Please enter a five digit US zip code" %}</p>
|
||||
<p class="tw-body-small tw-text-red-80 tw-hidden">{% trans "Please enter a five digit US zip code" %}</p>
|
||||
|
||||
{% endwith %}
|
||||
</div>
|
||||
<p class="tw-text-red-dark error-400 tw-hidden tw-mt-5">
|
||||
<p class="tw-text-red-80 error-400 tw-hidden tw-mt-5">
|
||||
{% trans "We’re sorry, we can’t call that number. Please check that it is the right number, or try a different one." %}
|
||||
</p>
|
||||
<button class="make-the-call btn btn-primary tw-w-full tw-mt-5" disabled>{{ cta.call_button_label }}</button>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ function setHighlight(target) {
|
|||
target.classList.remove(
|
||||
"tw-bg-white",
|
||||
"tw-text-black",
|
||||
"hover:tw-text-blue-dark"
|
||||
"hover:tw-text-blue-80"
|
||||
);
|
||||
target.classList.add("tw-bg-black", "tw-text-white");
|
||||
return target;
|
||||
|
|
@ -12,11 +12,7 @@ function setHighlight(target) {
|
|||
|
||||
function removeHighlight(target) {
|
||||
target.classList.remove("tw-bg-black", "tw-text-white");
|
||||
target.classList.add(
|
||||
"tw-bg-white",
|
||||
"tw-text-black",
|
||||
"hover:tw-text-blue-dark"
|
||||
);
|
||||
target.classList.add("tw-bg-white", "tw-text-black", "hover:tw-text-blue-80");
|
||||
return target;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -179,8 +179,8 @@ export class SearchFilter {
|
|||
];
|
||||
|
||||
const defaultClasses = [
|
||||
"hover:tw-border-pni-lilac",
|
||||
"hover:tw-bg-pni-lilac",
|
||||
"hover:tw-border-blue-10",
|
||||
"hover:tw-bg-blue-10",
|
||||
"tw-text-gray-60",
|
||||
"tw-border-gray-20",
|
||||
"tw-bg-white",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import copyToClipboard from "../../copy-to-clipboard.js";
|
|||
const RATE_LIMIT_ERROR = 429;
|
||||
|
||||
// Form field coloring
|
||||
const INVALID_FORM_FIELD = `tw-border-red-dark`;
|
||||
const INVALID_FORM_FIELD = `tw-border-red-80`;
|
||||
const VALID_FORM_BORDER = `tw-border-gray-20`;
|
||||
|
||||
// all the elements we'll need to work with.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
[data-foundation-carousel] {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
@apply tw-border-2 tw-text-blue tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
|
||||
@apply tw-border-2 tw-text-blue-40 tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
|
||||
|
||||
&.swiper-button-disabled {
|
||||
@apply tw-border-gray-20;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.swiper-button-icon {
|
||||
@apply tw-text-blue tw-w-4 tw-h-4;
|
||||
@apply tw-text-blue-40 tw-w-4 tw-h-4;
|
||||
}
|
||||
|
||||
.swiper-button-disabled {
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
@apply tw-bg-blue-dark;
|
||||
@apply tw-bg-blue-80;
|
||||
}
|
||||
|
||||
.swiper-hero-pagination {
|
||||
|
|
|
|||
|
|
@ -259,7 +259,7 @@ body.mozfest {
|
|||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
@apply tw-border-2 tw-text-blue tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
|
||||
@apply tw-border-2 tw-text-blue-40 tw-flex tw-flex-col tw-justify-center tw-items-center tw-w-[40px] tw-h-[40px] tw-transition;
|
||||
|
||||
&.swiper-button-disabled {
|
||||
@apply tw-border-gray-20;
|
||||
|
|
@ -275,7 +275,7 @@ body.mozfest {
|
|||
}
|
||||
|
||||
.swiper-button-icon {
|
||||
@apply tw-text-blue tw-w-4 tw-h-4;
|
||||
@apply tw-text-blue-40 tw-w-4 tw-h-4;
|
||||
}
|
||||
|
||||
.swiper-button-disabled {
|
||||
|
|
@ -293,7 +293,7 @@ body.mozfest {
|
|||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
@apply tw-bg-blue-dark;
|
||||
@apply tw-bg-blue-80;
|
||||
}
|
||||
|
||||
@keyframes slide-progress-bar {
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@
|
|||
@apply tw-text-white;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
@apply tw-text-blue-20;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
@apply tw-text-blue-20 tw-underline;
|
||||
}
|
||||
}
|
||||
@include set-text-size(18px, 27px, 24px, 34px);
|
||||
|
|
|
|||
|
|
@ -70,13 +70,13 @@
|
|||
@apply tw-text-white;
|
||||
|
||||
a {
|
||||
@apply tw-text-blue-light;
|
||||
@apply tw-text-blue-20;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
@apply tw-text-blue-light tw-underline;
|
||||
@apply tw-text-blue-20 tw-underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,18 +101,69 @@ module.exports = {
|
|||
80: "#333333",
|
||||
},
|
||||
red: {
|
||||
DEFAULT: "#ff4f5e",
|
||||
light: "#ffe6e8",
|
||||
dark: "#cc0011",
|
||||
"05": "#ffe6e8",
|
||||
10: "#ffb4ba",
|
||||
20: "#ff818c",
|
||||
40: "#ff4f5e",
|
||||
60: "#e62434",
|
||||
80: "#cc0011",
|
||||
100: "#9a000e",
|
||||
},
|
||||
blue: {
|
||||
DEFAULT: "#595cf3",
|
||||
dark: "#0d10bf",
|
||||
light: "#b7b9fa",
|
||||
lightest: "#e7e7fc",
|
||||
"05": "#e7e7fc",
|
||||
10: "#d3d5fc",
|
||||
20: "#b7b9fa",
|
||||
40: "#595cf3",
|
||||
60: "#3032d9",
|
||||
80: "#0d10bf",
|
||||
100: "#0003a6",
|
||||
},
|
||||
cyan: {
|
||||
"05": "#e6ffff",
|
||||
10: "#acffff",
|
||||
20: "#73ffff",
|
||||
40: "#00ffff",
|
||||
60: "#00c9c9",
|
||||
80: "#009494",
|
||||
100: "#005e5e",
|
||||
},
|
||||
green: {
|
||||
"05": "#d8fff0",
|
||||
10: "#acffe0",
|
||||
20: "#80ffce",
|
||||
40: "#54ffbd",
|
||||
60: "#2cc98e",
|
||||
80: "#109462",
|
||||
100: "#005e3a",
|
||||
},
|
||||
yellow: {
|
||||
"05": "#fffcd9",
|
||||
10: "#fff9ab",
|
||||
20: "#fff67d",
|
||||
40: "#fff44f",
|
||||
60: "#e5d92f",
|
||||
80: "#ccbf15",
|
||||
100: "#b2a600",
|
||||
},
|
||||
purple: {
|
||||
"05": "#ecd8fe",
|
||||
10: "#deb8fe",
|
||||
20: "#cd97fd",
|
||||
40: "#8f14fb",
|
||||
60: "#760bd4",
|
||||
80: "#5e05ac",
|
||||
100: "#470085",
|
||||
},
|
||||
pink: {
|
||||
"05": "#ffe5f1",
|
||||
10: "#ffbedc",
|
||||
20: "#ff98c6",
|
||||
40: "#ff298a",
|
||||
60: "#cc1165",
|
||||
80: "#9a0146",
|
||||
100: "#66012f",
|
||||
},
|
||||
pni: {
|
||||
lilac: "#d3d5fc",
|
||||
blue: "#1808f2",
|
||||
"blue-purple": "#4a17d4",
|
||||
purple: "#7f28b7",
|
||||
|
|
@ -130,7 +181,6 @@ module.exports = {
|
|||
100: "#2e05ff",
|
||||
},
|
||||
purple: {
|
||||
DEFAULT: "#8f14fb",
|
||||
100: "#fa00ff",
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче