@ama-pt/agora-design-system 3.1.0 → 3.2.0

package/artifacts/dist/tailwind.css

@@ -660,8 +660,7 @@ textarea::-moz-placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 textarea::placeholder{
@@ -669,8 +668,7 @@ textarea::placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 input[type]::-moz-placeholder{
@@ -678,8 +676,7 @@ input[type]::-moz-placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 input[type]::placeholder{
@@ -687,15 +684,14 @@ input[type]::placeholder{
   line-height: 1.75rem !important;
   letter-spacing: 0 !important;
   font-weight: 400 !important;
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+  color: var(--color-neutral-500);
 }
 
 *:focus{
   outline-style: solid;
   outline-width: 2px;
   outline-offset: -2px;
-  outline-color: #F408FC;
+  outline-color: var(--color-focus);
 }
 
 .container{
@@ -1207,6 +1203,10 @@ input[type]::placeholder{
   height: calc(100% - 128px);
 }
 
+.h-dvh{
+  height: 100dvh;
+}
+
 .h-fit{
   height: -moz-fit-content;
   height: fit-content;
@@ -1763,6 +1763,10 @@ input[type]::placeholder{
   grid-auto-flow: column;
 }
 
+.grid-cols-1{
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-cols-12{
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
@@ -2277,10 +2281,30 @@ input[type]::placeholder{
   border-color: rgb(151 71 255 / var(--tw-border-opacity, 1));
 }
 
+.border-\[var\(--color-neutral-200\)\]{
+  border-color: var(--color-neutral-200);
+}
+
+.border-\[var\(--color-neutral-300\)\]{
+  border-color: var(--color-neutral-300);
+}
+
+.border-\[var\(--color-neutral-600\)\]{
+  border-color: var(--color-neutral-600);
+}
+
 .border-\[var\(--color-neutral-700\)\]{
   border-color: var(--color-neutral-700);
 }
 
+.border-\[var\(--color-primary-400\)\]{
+  border-color: var(--color-primary-400);
+}
+
+.border-\[var\(--color-primary-600\)\]{
+  border-color: var(--color-primary-600);
+}
+
 .border-backdrop{
   border-color: rgba(43, 54, 60, 0.96);
 }
@@ -4318,6 +4342,10 @@ input[type]::placeholder{
   border-inline-end-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
 
+.border-l-\[var\(--color-neutral-900\)\]{
+  border-left-color: var(--color-neutral-900);
+}
+
 .border-l-backdrop{
   border-left-color: rgba(43, 54, 60, 0.96);
 }
@@ -5927,10 +5955,110 @@ input[type]::placeholder{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
 }
 
+.bg-\[var\(--color-backdrop\)\]{
+  background-color: var(--color-backdrop);
+}
+
+.bg-\[var\(--color-danger-100\)\]{
+  background-color: var(--color-danger-100);
+}
+
+.bg-\[var\(--color-danger-200\)\]{
+  background-color: var(--color-danger-200);
+}
+
+.bg-\[var\(--color-danger-600\)\]{
+  background-color: var(--color-danger-600);
+}
+
+.bg-\[var\(--color-informative-300\)\]{
+  background-color: var(--color-informative-300);
+}
+
+.bg-\[var\(--color-informative-50\)\]{
+  background-color: var(--color-informative-50);
+}
+
+.bg-\[var\(--color-neutral-100\)\]{
+  background-color: var(--color-neutral-100);
+}
+
+.bg-\[var\(--color-neutral-200\)\]{
+  background-color: var(--color-neutral-200);
+}
+
+.bg-\[var\(--color-neutral-300\)\]{
+  background-color: var(--color-neutral-300);
+}
+
+.bg-\[var\(--color-neutral-400\)\]{
+  background-color: var(--color-neutral-400);
+}
+
+.bg-\[var\(--color-neutral-50\)\]{
+  background-color: var(--color-neutral-50);
+}
+
+.bg-\[var\(--color-neutral-500\)\]{
+  background-color: var(--color-neutral-500);
+}
+
+.bg-\[var\(--color-primary-100\)\]{
+  background-color: var(--color-primary-100);
+}
+
+.bg-\[var\(--color-primary-300\)\]{
+  background-color: var(--color-primary-300);
+}
+
+.bg-\[var\(--color-primary-500\)\]{
+  background-color: var(--color-primary-500);
+}
+
+.bg-\[var\(--color-primary-600\)\]{
+  background-color: var(--color-primary-600);
+}
+
 .bg-\[var\(--color-primary-700\)\]{
   background-color: var(--color-primary-700);
 }
 
+.bg-\[var\(--color-primary-900\)\]{
+  background-color: var(--color-primary-900);
+}
+
+.bg-\[var\(--color-secondary-100\)\]{
+  background-color: var(--color-secondary-100);
+}
+
+.bg-\[var\(--color-secondary-300\)\]{
+  background-color: var(--color-secondary-300);
+}
+
+.bg-\[var\(--color-secondary-700\)\]{
+  background-color: var(--color-secondary-700);
+}
+
+.bg-\[var\(--color-success-500\)\]{
+  background-color: var(--color-success-500);
+}
+
+.bg-\[var\(--color-warning-200\)\]{
+  background-color: var(--color-warning-200);
+}
+
+.bg-\[var\(--color-warning-300\)\]{
+  background-color: var(--color-warning-300);
+}
+
+.bg-\[var\(--color-warning-500\)\]{
+  background-color: var(--color-warning-500);
+}
+
+.bg-\[var\(--color-warning-800\)\]{
+  background-color: var(--color-warning-800);
+}
+
 .bg-backdrop{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -6549,6 +6677,38 @@ input[type]::placeholder{
   background-origin: content-box;
 }
 
+.fill-\[var\(--color-danger-500\)\]{
+  fill: var(--color-danger-500);
+}
+
+.fill-\[var\(--color-informative-500\)\]{
+  fill: var(--color-informative-500);
+}
+
+.fill-\[var\(--color-neutral-900\)\]{
+  fill: var(--color-neutral-900);
+}
+
+.fill-\[var\(--color-primary-500\)\]{
+  fill: var(--color-primary-500);
+}
+
+.fill-\[var\(--color-primary-600\)\]{
+  fill: var(--color-primary-600);
+}
+
+.fill-\[var\(--color-secondary-500\)\]{
+  fill: var(--color-secondary-500);
+}
+
+.fill-\[var\(--color-success-500\)\]{
+  fill: var(--color-success-500);
+}
+
+.fill-\[var\(--color-warning-500\)\]{
+  fill: var(--color-warning-500);
+}
+
 .fill-backdrop{
   fill: rgba(43, 54, 60, 0.96);
 }
@@ -7306,10 +7466,6 @@ input[type]::placeholder{
   padding-bottom: 64px;
 }
 
-.pb-96{
-  padding-bottom: 96px;
-}
-
 .pl-8{
   padding-left: 8px;
 }
@@ -7589,6 +7745,42 @@ input[type]::placeholder{
   text-transform: none;
 }
 
+.text-\[var\(--color-informative-500\)\]{
+  color: var(--color-informative-500);
+}
+
+.text-\[var\(--color-neutral-500\)\]{
+  color: var(--color-neutral-500);
+}
+
+.text-\[var\(--color-neutral-700\)\]{
+  color: var(--color-neutral-700);
+}
+
+.text-\[var\(--color-neutral-900\)\]{
+  color: var(--color-neutral-900);
+}
+
+.text-\[var\(--color-primary-400\)\]{
+  color: var(--color-primary-400);
+}
+
+.text-\[var\(--color-primary-600\)\]{
+  color: var(--color-primary-600);
+}
+
+.text-\[var\(--color-primary-700\)\]{
+  color: var(--color-primary-700);
+}
+
+.text-\[var\(--color-primary-900\)\]{
+  color: var(--color-primary-900);
+}
+
+.text-\[var\(--color-white\)\]{
+  color: var(--color-white);
+}
+
 .text-backdrop{
   color: rgba(43, 54, 60, 0.96);
 }
@@ -8066,8 +8258,8 @@ input[type]::placeholder{
   text-decoration-line: line-through;
 }
 
-.decoration-primary-600{
-  text-decoration-color: #034AD8;
+.decoration-\[var\(--color-primary-600\)\]{
+  text-decoration-color: var(--color-primary-600);
 }
 
 .decoration-2{
@@ -8217,8 +8409,8 @@ input[type]::placeholder{
   outline-offset: -2px;
 }
 
-.outline-focus{
-  outline-color: #F408FC;
+.outline-\[var\(--color-focus\)\]{
+  outline-color: var(--color-focus);
 }
 
 .blur{
@@ -12517,6 +12709,14 @@ input[type]::placeholder{
   --tw-border-opacity: 0.95;
 }
 
+.hover\:bg-\[var\(--color-primary-100\)\]:hover{
+  background-color: var(--color-primary-100);
+}
+
+.hover\:bg-\[var\(--color-primary-900\)\]:hover{
+  background-color: var(--color-primary-900);
+}
+
 .hover\:bg-backdrop:hover{
   background-color: rgba(43, 54, 60, 0.96);
 }
@@ -14002,6 +14202,10 @@ input[type]::placeholder{
   font-weight: 600;
 }
 
+.hover\:text-\[var\(--color-primary-600\)\]:hover{
+  color: var(--color-primary-600);
+}
+
 .hover\:text-backdrop:hover{
   color: rgba(43, 54, 60, 0.96);
 }
@@ -20856,27 +21060,24 @@ input[type]::placeholder{
   outline-offset: -2px;
 }
 
-.focus\:outline-focus:focus{
-  outline-color: #F408FC;
+.focus\:outline-\[var\(--color-focus\)\]:focus{
+  outline-color: var(--color-focus);
 }
 
 .active\:border-0:active{
   border-width: 0;
 }
 
-.active\:bg-neutral-200:active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 228 234 / var(--tw-bg-opacity, 1));
+.active\:bg-\[var\(--color-neutral-200\)\]:active{
+  background-color: var(--color-neutral-200);
 }
 
-.active\:bg-primary-700:active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 56 162 / var(--tw-bg-opacity, 1));
+.active\:bg-\[var\(--color-primary-700\)\]:active{
+  background-color: var(--color-primary-700);
 }
 
-.active\:text-neutral-900:active{
-  --tw-text-opacity: 1;
-  color: rgb(43 54 60 / var(--tw-text-opacity, 1));
+.active\:text-\[var\(--color-neutral-900\)\]:active{
+  color: var(--color-neutral-900);
 }
 
 .active\:shadow-inner:active{
@@ -26604,10 +26805,6 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
-  .xs\:p-0{
-    padding: 0px;
-  }
-
   .xs\:p-32{
     padding: 32px;
   }
@@ -33266,10 +33463,6 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
-  .md\:p-64{
-    padding: 64px;
-  }
-
   .md\:px-64{
     padding-left: 64px;
     padding-right: 64px;
@@ -34287,6 +34480,10 @@ input[type]::placeholder{
     width: 696px;
   }
 
+  .xl\:w-\[800px\]{
+    width: 800px;
+  }
+
   .xl\:\!min-w-min{
     min-width: -moz-min-content !important;
     min-width: min-content !important;
@@ -34636,6 +34833,10 @@ input[type]::placeholder{
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .xl\:grid-cols-6{
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
@@ -39870,10 +40071,6 @@ input[type]::placeholder{
     stroke-width: 2;
   }
 
-  .xl\:p-64{
-    padding: 64px;
-  }
-
   .xl\:px-0{
     padding-left: 0px;
     padding-right: 0px;
@@ -40709,9 +40906,8 @@ input[type]::placeholder{
   font-weight: 600;
 }
 
-.\[\&\>\*\]\:text-neutral-500>*{
-  --tw-text-opacity: 1;
-  color: rgb(156 166 184 / var(--tw-text-opacity, 1));
+.\[\&\>\*\]\:text-\[var\(--color-neutral-500\)\]>*{
+  color: var(--color-neutral-500);
 }
 
 .\[\&\>\.children-wrapper\]\:w-full>.children-wrapper{

package/artifacts/dist/types/components/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, ReactNode, SyntheticEvent } from 'react';
 import { BooleanProp, HeadingLevel } from '../../models';
-import './accordion.scss';
+import './accordion.css';
 export interface AccordionElement extends HTMLDivElement {
     /**
      *  Expand the accordion.

package/artifacts/dist/types/components/accordion-group/accordion-group.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactElement } from 'react';
 import { BooleanProp } from '../../models';
 import { AccordionProps } from '../../components/accordion';
-import './accordion-group.scss';
+import './accordion-group.css';
 export interface AccordionGroupProps extends ComponentProps<'ul'> {
     /**
      * List of accordion components to use as children of the group.

package/artifacts/dist/types/components/anchor/anchor.d.ts

@@ -1,6 +1,6 @@
 import { BooleanProp } from '../../models';
 import { ComponentProps, FC, ReactNode } from 'react';
-import './anchor.scss';
+import './anchor.css';
 /**
  * The available variants of the anchors. This variants will define the background and border color of the anchors.
  */

package/artifacts/dist/types/components/avatar/avatar.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps, FC, ReactNode } from 'react';
 import { IconName } from '../../components/icon';
 import { TooltipAlignment, TooltipPosition } from '../../components/tooltip';
 import { BooleanProp } from '../../models';
-import './avatar.scss';
+import './avatar.css';
 /**
  *  The available avatar types. Each of them define the appearance of the avatar image.
  */

package/artifacts/dist/types/components/avatar-group/avatar-group.d.ts

@@ -1,7 +1,7 @@
 import { BooleanProp } from '../../models';
 import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
 import { AvatarProps } from '../avatar';
-import './avatar-group.scss';
+import './avatar-group.css';
 export interface AvatarGroupProps extends ComponentPropsWithoutRef<'ul'> {
     /**
      * List of avatar components to use as children of the group.

package/artifacts/dist/types/components/breadcrumb/desktop/breadcrumb-desktop.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { BreadcrumbProps } from '../../../components/breadcrumb';
-import './breadcrumb-desktop.scss';
+import './breadcrumb-desktop.css';
 export declare const BreadcrumbDesktop: FC<BreadcrumbProps>;

package/artifacts/dist/types/components/breadcrumb/mobile/breadcrumb-mobile.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
 import { BreadcrumbProps } from '../../../components/breadcrumb';
-import './breadcrumb-mobile.scss';
+import './breadcrumb-mobile.css';
 export declare const BreadcrumbMobile: FC<BreadcrumbProps>;

package/artifacts/dist/types/components/button/button.d.ts

@@ -1,6 +1,6 @@
 import { BooleanProp } from '../../models';
 import { ComponentProps, FC, ReactNode } from 'react';
-import './button.scss';
+import './button.css';
 /**
  * The available variants of the button. This variants will define the background and border color of the button.
  */

package/artifacts/dist/types/components/button-group/button-group.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps, ButtonVariant } from '../../components/button';
 import { BooleanProp } from '../../models';
 import { FC, HtmlHTMLAttributes, ReactElement } from 'react';
-import './button-group.scss';
+import './button-group.css';
 export type ButtonGroupOrientation = 'horizontal' | 'vertical';
 export interface ButtonGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**

package/artifacts/dist/types/components/cards/card-action/card-action.d.ts

@@ -1,7 +1,7 @@
 import { FC, ImgHTMLAttributes } from 'react';
 import { ButtonProps } from '../../../components/button';
 import { IconProps } from '../../../components/icon';
-import './card-action.scss';
+import './card-action.css';
 import { BooleanProp } from '../../../models';
 export type CardActionStyles = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'white-line' | 'primary-900-line';
 export type CardActionAlignment = 'left' | 'center' | 'right';

package/artifacts/dist/types/components/cards/card-article/card-article.d.ts

@@ -2,7 +2,7 @@ import { AnchorProps } from '../../../components/anchor';
 import { PillProps } from '../../../components/pill';
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { ComponentPropsWithoutRef, FC, ImgHTMLAttributes, ReactNode } from 'react';
-import './card-article.scss';
+import './card-article.css';
 export type CardArticleVariant = 'default' | 'indented';
 export interface CardArticleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**

package/artifacts/dist/types/components/cards/card-collection/card-collection.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { AnchorProps } from '../../../components/anchor';
 import { BooleanProp, HeadingLevel } from '../../../models';
-import './card-collection.scss';
+import './card-collection.css';
 export interface CardCollectionProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * Card Collection heading level title.

package/artifacts/dist/types/components/cards/card-emphasize/card-emphasize.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { ButtonProps } from '../../../components/button';
 import { IconProps } from '../../../components/icon';
-import './card-emphasize.scss';
+import './card-emphasize.css';
 /**
  * The available alignments of the card emphasize.
  */

package/artifacts/dist/types/components/cards/card-error/card-error.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { BooleanProp } from '../../../models';
-import './card-error.scss';
+import './card-error.css';
 export interface CardErrorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      *  The card icon.

package/artifacts/dist/types/components/cards/card-expandable/card-accordion/card-accordion.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps, FC, ReactNode, SyntheticEvent } from 'react';
 import { BooleanProp, HeadingLevel } from '../../../../models';
-import './card-accordion.scss';
+import './card-accordion.css';
 /**
  * The available variants of the accordion. Those variants will define the style of the accordion.
  */
-export type CardAccordionVariant = 'white' | 'primary-light' | 'primary-dark';
+export type CardAccordionVariant = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900';
 export interface CardAccordionElement extends HTMLDivElement {
     /**
      *  Expand the accordion.

package/artifacts/dist/types/components/cards/card-expandable/card-expandable-style.d.ts

@@ -0,0 +1,16 @@
+import { CardExpandableVariant } from './card-expandable';
+type CardExpandableStylesBody = {
+    backgroundColor: string;
+    textColor: string;
+    iconColor: string;
+    anchorColor: string;
+};
+export type CardExpandableStylesMap = Record<CardExpandableVariant, CardExpandableStylesBody>;
+export declare const cardExpandableStylesMap: CardExpandableStylesMap;
+type BookMarkIconStyles = {
+    fill: string;
+    fillTop: string;
+};
+export type BookMarkIconStylesMap = Record<CardExpandableVariant, BookMarkIconStyles>;
+export declare const bookMarkIconStylesMap: BookMarkIconStylesMap;
+export {};

package/artifacts/dist/types/components/cards/card-expandable/card-expandable.d.ts

@@ -1,11 +1,11 @@
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { ComponentProps, FC, ReactNode, SyntheticEvent } from 'react';
-import './card-expandable.scss';
 import { CardAccordionElement } from './card-accordion';
+import './card-expandable.css';
 /**
  * The available variants of the card. Those variants will define the style of the card.
  */
-export type CardExpandableVariant = 'white' | 'primary-light' | 'primary-dark';
+export type CardExpandableVariant = 'white' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'neutral-100';
 export interface CardExpandableElement extends CardAccordionElement {
 }
 export interface CardExpandableProps extends Omit<ComponentProps<'div'>, 'title'> {

package/artifacts/dist/types/components/cards/card-frame/card-frame.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { BooleanProp, HeadingLevel } from '../../../models';
 import { AnchorProps } from '../../../components/anchor';
-import './card-frame.scss';
+import './card-frame.css';
 export interface CardFrameProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Children content.

package/artifacts/dist/types/components/cards/card-full-image/card-full-image.d.ts

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, FC, ImgHTMLAttributes, ReactElement } from 'r
 import { CardHeroHelperProps } from '../../../components/cards/card-hero-helper';
 import { CardHeroIndexProps } from '../../../components/cards/card-hero-index';
 import { CardHeroSitemapProps } from '../../../components/cards/card-hero-sitemap';
-import './card-full-image.scss';
+import './card-full-image.css';
 export interface CardFullImageProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Children content.

package/artifacts/dist/types/components/cards/card-hero-helper/card-hero-helper.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { HeadingLevel } from '../../../models';
 import { AnchorProps } from '../../../components/anchor';
-import './card-hero-helper.scss';
+import './card-hero-helper.css';
 export interface HelpTopic {
     description: ReactNode;
     anchor: AnchorProps;

package/artifacts/dist/types/components/cards/card-hero-index/card-hero-index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { AnchorProps } from '../../../components/anchor';
 import { HeadingLevel } from '../../../models';
-import './card-hero-index.scss';
+import './card-hero-index.css';
 export interface CardHeroIndexProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * The title of the card.