@twilio-paste/theme - npm Package Compare versions

Comparing version 5.0.2 to 5.1.0

CHANGELOG.md

 # Change Log
 
+## 5.1.0
+
+### Minor Changes
+
+- [`25a1f632`](https://github.com/twilio-labs/paste/commit/25a1f632b6d92271967470f8c65a2dbc6babbaca) [#1404](https://github.com/twilio-labs/paste/pull/1404) Thanks [@SiTaggart](https://github.com/SiTaggart)! - Add a dark theme to Paste
+
 ## 5.0.2
@@ -4,0 +10,0 @@

dist/constants.d.ts

@@ -7,4 +7,5 @@ import type { ValueOf } from '@twilio-paste/types';
     readonly FLEX: "flex";
+    readonly DARK: "dark";
 };
 export declare type ThemeVariants = ValueOf<typeof ThemeVariants>;
 //# sourceMappingURL=constants.d.ts.map

dist/generateThemeFromTokens.d.ts

@@ -16,11 +16,22 @@ import { backgroundColors as BackgroundColors, borderColors as BorderColors, borderWidths as BorderWidths, radii as Radii, fonts as Fonts, fontSizes as FontSizes, fontWeights as FontWeights, lineHeights as LineHeights, boxShadows as BoxShadows, sizings as Sizings, spacings as Spacings, textColors as TextColors, zIndices as ZIndices } from '@twilio-paste/design-tokens';
     colorBackgroundDestructiveDarker: any;
+    colorBackgroundDestructiveDarkest: any;
     colorBackgroundDestructiveLight: any;
     colorBackgroundDestructiveLighter: any;
     colorBackgroundDestructiveLightest: any;
+    colorBackgroundDestructiveStrong: any;
+    colorBackgroundDestructiveStronger: any;
+    colorBackgroundDestructiveStrongest: any;
+    colorBackgroundDestructiveWeak: any;
+    colorBackgroundDestructiveWeaker: any;
+    colorBackgroundDestructiveWeakest: any;
     colorBackgroundError: any;
     colorBackgroundErrorDark: any;
     colorBackgroundErrorLightest: any;
+    colorBackgroundErrorStrong: any;
+    colorBackgroundErrorWeakest: any;
     colorBackgroundInverse: any;
     colorBackgroundInverseLight: any;
+    colorBackgroundInverseStrong: any;
     colorBackgroundNeutralLightest: any;
+    colorBackgroundNeutralWeakest: any;
     colorBackgroundNew: any;
@@ -35,7 +46,17 @@ colorBackgroundOverlay: any;
     colorBackgroundPrimaryLightest: any;
+    colorBackgroundPrimaryStrong: any;
+    colorBackgroundPrimaryStronger: any;
+    colorBackgroundPrimaryStrongest: any;
+    colorBackgroundPrimaryWeak: any;
+    colorBackgroundPrimaryWeaker: any;
+    colorBackgroundPrimaryWeakest: any;
     colorBackgroundRequired: any;
     colorBackgroundRowStriped: any;
+    colorBackgroundStrong: any;
+    colorBackgroundStronger: any;
+    colorBackgroundStrongest: any;
     colorBackgroundSubaccount: any;
     colorBackgroundSuccess: any;
     colorBackgroundSuccessLightest: any;
+    colorBackgroundSuccessWeakest: any;
     colorBackgroundTrial: any;
@@ -45,2 +66,3 @@ colorBackgroundUser: any;
     colorBackgroundWarningLightest: any;
+    colorBackgroundWarningWeakest: any;
 }>, borderColors: Partial<{
@@ -52,4 +74,11 @@ colorBorder: any;
     colorBorderDestructiveDarker: any;
+    colorBorderDestructiveDarkest: any;
     colorBorderDestructiveLight: any;
     colorBorderDestructiveLighter: any;
+    colorBorderDestructiveStrong: any;
+    colorBorderDestructiveStronger: any;
+    colorBorderDestructiveStrongest: any;
+    colorBorderDestructiveWeak: any;
+    colorBorderDestructiveWeaker: any;
+    colorBorderDestructiveWeakest: any;
     colorBorderError: any;
@@ -59,2 +88,5 @@ colorBorderErrorDark: any;
     colorBorderErrorLightest: any;
+    colorBorderErrorStrong: any;
+    colorBorderErrorWeak: any;
+    colorBorderErrorWeakest: any;
     colorBorderInverse: any;
@@ -64,2 +96,5 @@ colorBorderInverseDarker: any;
     colorBorderInverseLightest: any;
+    colorBorderInverseStronger: any;
+    colorBorderInverseStrongest: any;
+    colorBorderInverseWeaker: any;
     colorBorderLight: any;
@@ -69,13 +104,28 @@ colorBorderLighter: any;
     colorBorderNeutralLight: any;
+    colorBorderNeutralWeak: any;
     colorBorderPrimary: any;
     colorBorderPrimaryDark: any;
     colorBorderPrimaryDarker: any;
+    colorBorderPrimaryDarkest: any;
     colorBorderPrimaryLight: any;
     colorBorderPrimaryLighter: any;
+    colorBorderPrimaryStrong: any;
+    colorBorderPrimaryStronger: any;
+    colorBorderPrimaryStrongest: any;
+    colorBorderPrimaryWeak: any;
+    colorBorderPrimaryWeaker: any;
+    colorBorderPrimaryWeakest: any;
+    colorBorderStrong: any;
     colorBorderSuccess: any;
     colorBorderSuccessLight: any;
     colorBorderSuccessLightest: any;
+    colorBorderSuccessWeak: any;
+    colorBorderSuccessWeakest: any;
     colorBorderWarning: any;
     colorBorderWarningLight: any;
     colorBorderWarningLightest: any;
+    colorBorderWarningWeak: any;
+    colorBorderWarningWeakest: any;
+    colorBorderWeak: any;
+    colorBorderWeaker: any;
 }>, borderWidths: Partial<{
@@ -134,5 +184,12 @@ borderWidth0: any;
     shadowBorderDestructiveLighter: any;
+    shadowBorderDestructiveStrong: any;
+    shadowBorderDestructiveStronger: any;
+    shadowBorderDestructiveStrongest: any;
+    shadowBorderDestructiveWeak: any;
+    shadowBorderDestructiveWeaker: any;
     shadowBorderError: any;
     shadowBorderErrorDark: any;
     shadowBorderErrorLight: any;
+    shadowBorderErrorStrong: any;
+    shadowBorderErrorWeak: any;
     shadowBorderInverse: any;
@@ -142,2 +199,5 @@ shadowBorderInverseDarker: any;
     shadowBorderInverseLightest: any;
+    shadowBorderInverseStrong: any;
+    shadowBorderInverseStrongest: any;
+    shadowBorderInverseWeaker: any;
     shadowBorderLight: any;
@@ -150,2 +210,9 @@ shadowBorderLighter: any;
     shadowBorderPrimaryLighter: any;
+    shadowBorderPrimaryStrong: any;
+    shadowBorderPrimaryStronger: any;
+    shadowBorderPrimaryStrongest: any;
+    shadowBorderPrimaryWeak: any;
+    shadowBorderPrimaryWeaker: any;
+    shadowBorderStrong: any;
+    shadowBorderStronger: any;
     shadowCard: any;
@@ -253,2 +320,4 @@ shadowFocus: any;
     colorTextErrorLight: any;
+    colorTextErrorStrong: any;
+    colorTextErrorWeak: any;
     colorTextIcon: any;
@@ -266,3 +335,9 @@ colorTextIconInverse: any;
     colorTextLinkDestructiveLight: any;
+    colorTextLinkDestructiveStrong: any;
+    colorTextLinkDestructiveStronger: any;
+    colorTextLinkDestructiveWeak: any;
     colorTextLinkLight: any;
+    colorTextLinkStrong: any;
+    colorTextLinkStronger: any;
+    colorTextLinkWeak: any;
     colorTextNeutral: any;
@@ -273,4 +348,6 @@ colorTextNew: any;
     colorTextWarningDark: any;
+    colorTextWarningStrong: any;
     colorTextWeak: any;
     colorTextWeaker: any;
+    colorTextWeakest: any;
 }>, zIndices: Partial<{
@@ -277,0 +354,0 @@ zIndex0: any;

dist/index.d.ts

@@ -13,6 +13,6 @@ /// <reference types="react" />
 export type { ThemeProviderProps };
-export type { ThemeShape, SendGridThemeShape, ConsoleThemeShape } from './types/themes';
+export type { ThemeShape, SendGridThemeShape, ConsoleThemeShape, DarkThemeShape } from './types/themes';
 export type { GenericThemeShape } from './types/GenericThemeShape';
 export type { GenericTokenShape } from './types/GenericTokenShape';
-export { DefaultTheme, ConsoleTheme, SendGridTheme } from './themes';
+export { DefaultTheme, ConsoleTheme, SendGridTheme, DarkTheme } from './themes';
 export { withTheme } from './withTheme';
@@ -19,0 +19,0 @@ export { useTheme } from './useTheme';

dist/index.es.js

@@ -1,2 +0,2 @@
-var F=Object.prototype.hasOwnProperty;var _=Object.getOwnPropertySymbols,z=Object.prototype.propertyIsEnumerable;var i=Object.assign;var f=(e,r)=>{var s={};for(var o in e)F.call(e,o)&&r.indexOf(o)<0&&(s[o]=e[o]);if(e!=null&&_)for(var o of _(e))r.indexOf(o)<0&&z.call(e,o)&&(s[o]=e[o]);return s};import{createElement as d,useEffect as Se}from"react";import{useReducedMotion as ke,Globals as be}from"@twilio-paste/animation-library";import{styled as we,StylingGlobals as I,ThemeProvider as Ce}from"@twilio-paste/styling-library";import{backgroundColors as R,borderColors as E,borderWidths as W,radii as V,fonts as B,fontSizes as D,fontWeights as H,lineHeights as L,boxShadows as M,sizings as N,spacings as U,textColors as A,zIndices as O}from"@twilio-paste/design-tokens";var a=(e,r,s,o,n,l,p,T,u,t,g,x,S)=>{let G=[t.size40,t.size100,t.size120];return{shadows:u,borderWidths:s,radii:o,breakpoints:G,textColors:x,borderColors:r,backgroundColors:e,fonts:n,fontSizes:l,fontWeights:p,lineHeights:T,widths:t,maxWidths:t,minWidths:t,heights:t,maxHeights:t,minHeights:t,sizes:t,iconSizes:{sizeIcon10:t.sizeIcon10,sizeIcon20:t.sizeIcon20,sizeIcon30:t.sizeIcon30,sizeIcon40:t.sizeIcon40,sizeIcon50:t.sizeIcon50,sizeIcon60:t.sizeIcon60,sizeIcon70:t.sizeIcon70,sizeIcon80:t.sizeIcon80,sizeIcon90:t.sizeIcon90,sizeIcon100:t.sizeIcon100,sizeIcon110:t.sizeIcon110},space:g,zIndices:S}};var h=a(R,E,W,V,B,D,H,L,M,N,U,A,O);import{backgroundColors as X,borderColors as Z,borderWidths as q,radii as Y,fonts as $,fontSizes as j,fontWeights as J,lineHeights as K,boxShadows as Q,sizings as ee,spacings as te,textColors as oe,zIndices as re}from"@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6";var c=a(X,Z,q,Y,$,j,J,K,Q,ee,te,oe,re);import{backgroundColors as se,borderColors as ie,borderWidths as ne,radii as ae,fonts as me,fontSizes as le,fontWeights as pe,lineHeights as fe,boxShadows as he,sizings as ce,spacings as ye,textColors as de,zIndices as Te}from"@twilio-paste/design-tokens/dist/themes/console/tokens.es6";var y=a(se,ie,ne,ae,me,le,pe,fe,he,ce,ye,de,Te);import{css as ue}from"@twilio-paste/styling-library";var k=ue({html:{fontSize:"100%"},body:{margin:0,fontSize:"fontSize30"},"*, *::after, *::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"*":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});import{css as ge}from"@twilio-paste/styling-library";var b=ge({color:"colorText",fontSize:"fontSize30",fontFamily:"fontFamilyText",lineHeight:"lineHeight30",fontWeight:"fontWeightNormal",fontVariantNumeric:"tabular-nums"});import{EmotionCSS as xe}from"@twilio-paste/styling-library";var w=xe`
+var z=Object.prototype.hasOwnProperty;var _=Object.getOwnPropertySymbols,R=Object.prototype.propertyIsEnumerable;var i=Object.assign;var f=(e,r)=>{var s={};for(var o in e)z.call(e,o)&&r.indexOf(o)<0&&(s[o]=e[o]);if(e!=null&&_)for(var o of _(e))r.indexOf(o)<0&&R.call(e,o)&&(s[o]=e[o]);return s};import{createElement as T,useEffect as Ee}from"react";import{useReducedMotion as De,Globals as Ve}from"@twilio-paste/animation-library";import{styled as He,StylingGlobals as P,ThemeProvider as Be}from"@twilio-paste/styling-library";import{backgroundColors as W,borderColors as E,borderWidths as D,radii as V,fonts as H,fontSizes as B,fontWeights as L,lineHeights as M,boxShadows as A,sizings as N,spacings as U,textColors as O,zIndices as X}from"@twilio-paste/design-tokens";var n=(e,r,s,o,a,l,p,u,g,t,x,k,S)=>{let G=[t.size40,t.size100,t.size120];return{shadows:g,borderWidths:s,radii:o,breakpoints:G,textColors:k,borderColors:r,backgroundColors:e,fonts:a,fontSizes:l,fontWeights:p,lineHeights:u,widths:t,maxWidths:t,minWidths:t,heights:t,maxHeights:t,minHeights:t,sizes:t,iconSizes:{sizeIcon10:t.sizeIcon10,sizeIcon20:t.sizeIcon20,sizeIcon30:t.sizeIcon30,sizeIcon40:t.sizeIcon40,sizeIcon50:t.sizeIcon50,sizeIcon60:t.sizeIcon60,sizeIcon70:t.sizeIcon70,sizeIcon80:t.sizeIcon80,sizeIcon90:t.sizeIcon90,sizeIcon100:t.sizeIcon100,sizeIcon110:t.sizeIcon110},space:x,zIndices:S}};var h=n(W,E,D,V,H,B,L,M,A,N,U,O,X);import{backgroundColors as K,borderColors as Z,borderWidths as q,radii as Y,fonts as $,fontSizes as j,fontWeights as J,lineHeights as Q,boxShadows as ee,sizings as te,spacings as oe,textColors as re,zIndices as se}from"@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6";var c=n(K,Z,q,Y,$,j,J,Q,ee,te,oe,re,se);import{backgroundColors as ie,borderColors as ne,borderWidths as ae,radii as me,fonts as le,fontSizes as pe,fontWeights as fe,lineHeights as he,boxShadows as ce,sizings as ye,spacings as de,textColors as Te,zIndices as ue}from"@twilio-paste/design-tokens/dist/themes/console/tokens.es6";var y=n(ie,ne,ae,me,le,pe,fe,he,ce,ye,de,Te,ue);import{backgroundColors as ge,borderColors as xe,borderWidths as ke,radii as Se,fonts as be,fontSizes as we,fontWeights as Ce,lineHeights as Ie,boxShadows as _e,sizings as Pe,spacings as ve,textColors as Fe,zIndices as Ge}from"@twilio-paste/design-tokens/dist/themes/dark/tokens.es6";var d=n(ge,xe,ke,Se,be,we,Ce,Ie,_e,Pe,ve,Fe,Ge);import{css as ze}from"@twilio-paste/styling-library";var b=ze({html:{fontSize:"100%"},body:{margin:0,fontSize:"fontSize30"},"*, *::after, *::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"*":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});import{css as Re}from"@twilio-paste/styling-library";var w=Re({color:"colorText",fontSize:"fontSize30",fontFamily:"fontFamilyText",lineHeight:"lineHeight30",fontWeight:"fontWeightNormal",fontVariantNumeric:"tabular-nums"});import{EmotionCSS as We}from"@twilio-paste/styling-library";var C=We`
 /* -------------------------------------------------------
@@ -72,2 +72,2 @@ Variable font.
 }
-`;var m={DEFAULT:"default",CONSOLE:"console",SENDGRID:"sendgrid",FLEX:"flex"};var C=we.div(b);function _e(e,r){switch(e){case m.SENDGRID:return i(i({},c),{breakpoints:r||c.breakpoints});case m.CONSOLE:return i(i({},y),{breakpoints:r||y.breakpoints});case m.FLEX:case m.DEFAULT:default:return i(i({},h),{breakpoints:r||h.breakpoints})}}var P=n=>{var{customBreakpoints:e,theme:r=m.DEFAULT,disableAnimations:s=!1}=n,o=f(n,["customBreakpoints","theme","disableAnimations"]);let l=ke();Se(()=>{be.assign({skipAnimation:s||l})},[l]);let p=_e(r,e);return d(Ce,{theme:p},d(I,{styles:k({theme:p})}),d(I,{styles:w}),d(C,i({},o)))};import{createElement as Ie}from"react";import{ThemeContext as Pe}from"@twilio-paste/styling-library";var v=s=>{var{children:e}=s,r=f(s,["children"]);if(e==null||typeof e!="function")throw new Error("[ThemeConsumer]: You must pass a function as children");return Ie(Pe.Consumer,null,o=>{let n=o;return e(i(i({},r),{theme:n}))})};import{withTheme as ve}from"@twilio-paste/styling-library";import{useContext as Ge}from"react";import{ThemeContext as Fe}from"@twilio-paste/styling-library";var ze=()=>{let e=Ge(Fe);if(!e)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return e};var Re=(e,r,s,o,n,l,p,T,u,t,g,x,S)=>({boxShadows:u,borderWidths:s,radii:o,textColors:x,borderColors:r,backgroundColors:e,fonts:n,fontSizes:l,fontWeights:p,lineHeights:T,sizings:t,spacings:g,zIndices:S});var Ee=16,We=(e,r="number")=>{let s=typeof e=="string"?Number.parseFloat(e.replace("rem","")):e,o=Math.round(s*Ee);return r==="number"?o:`${o}px`};var Ve={Provider:P,Consumer:v};export{y as ConsoleTheme,h as DefaultTheme,c as SendGridTheme,C as StyledBase,Ve as Theme,m as ThemeVariants,a as generateThemeFromTokens,Re as generateTokensFromTheme,b as pasteBaseStyles,w as pasteFonts,k as pasteGlobalStyles,We as remToPx,ze as useTheme,ve as withTheme};
+`;var m={DEFAULT:"default",CONSOLE:"console",SENDGRID:"sendgrid",FLEX:"flex",DARK:"dark"};var I=He.div(w);function Le(e,r){switch(e){case m.DARK:return i(i({},d),{breakpoints:r||d.breakpoints});case m.SENDGRID:return i(i({},c),{breakpoints:r||c.breakpoints});case m.CONSOLE:return i(i({},y),{breakpoints:r||y.breakpoints});case m.FLEX:case m.DEFAULT:default:return i(i({},h),{breakpoints:r||h.breakpoints})}}var v=a=>{var{customBreakpoints:e,theme:r=m.DEFAULT,disableAnimations:s=!1}=a,o=f(a,["customBreakpoints","theme","disableAnimations"]);let l=De();Ee(()=>{Ve.assign({skipAnimation:s||l})},[l]);let p=Le(r,e);return T(Be,{theme:p},T(P,{styles:b({theme:p})}),T(P,{styles:C}),T(I,i({},o)))};import{createElement as Me}from"react";import{ThemeContext as Ae}from"@twilio-paste/styling-library";var F=s=>{var{children:e}=s,r=f(s,["children"]);if(e==null||typeof e!="function")throw new Error("[ThemeConsumer]: You must pass a function as children");return Me(Ae.Consumer,null,o=>{let a=o;return e(i(i({},r),{theme:a}))})};import{withTheme as Ne}from"@twilio-paste/styling-library";import{useContext as Ue}from"react";import{ThemeContext as Oe}from"@twilio-paste/styling-library";var Xe=()=>{let e=Ue(Oe);if(!e)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return e};var Ke=(e,r,s,o,a,l,p,u,g,t,x,k,S)=>({boxShadows:g,borderWidths:s,radii:o,textColors:k,borderColors:r,backgroundColors:e,fonts:a,fontSizes:l,fontWeights:p,lineHeights:u,sizings:t,spacings:x,zIndices:S});var Ze=16,qe=(e,r="number")=>{let s=typeof e=="string"?Number.parseFloat(e.replace("rem","")):e,o=Math.round(s*Ze);return r==="number"?o:`${o}px`};var Ye={Provider:v,Consumer:F};export{y as ConsoleTheme,d as DarkTheme,h as DefaultTheme,c as SendGridTheme,I as StyledBase,Ye as Theme,m as ThemeVariants,n as generateThemeFromTokens,Ke as generateTokensFromTheme,w as pasteBaseStyles,C as pasteFonts,b as pasteGlobalStyles,qe as remToPx,Xe as useTheme,Ne as withTheme};

dist/index.js

@@ -1,2 +0,2 @@
-var Z=Object.create,u=Object.defineProperty,q=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty,Y=Object.getOwnPropertyNames,$=Object.getOwnPropertyDescriptor,E=Object.getOwnPropertySymbols,j=Object.prototype.propertyIsEnumerable;var l=Object.assign,W=e=>u(e,"__esModule",{value:!0});var g=(e,t)=>{var a={};for(var o in e)R.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&E)for(var o of E(e))t.indexOf(o)<0&&j.call(e,o)&&(a[o]=e[o]);return a};var J=(e,t)=>{W(e);for(var a in t)u(e,a,{get:t[a],enumerable:!0})},K=(e,t,a)=>{if(W(e),t&&typeof t=="object"||typeof t=="function")for(let o of Y(t))!R.call(e,o)&&o!=="default"&&u(e,o,{get:()=>t[o],enumerable:!(a=$(t,o))||a.enumerable});return e},m=e=>e&&e.__esModule?e:K(u(e!=null?Z(q(e)):{},"default",{value:e,enumerable:!0}),e);J(exports,{ConsoleTheme:()=>k,DefaultTheme:()=>x,SendGridTheme:()=>S,StyledBase:()=>z,Theme:()=>se,ThemeVariants:()=>h,generateThemeFromTokens:()=>f,generateTokensFromTheme:()=>te,pasteBaseStyles:()=>G,pasteFonts:()=>F,pasteGlobalStyles:()=>v,remToPx:()=>re,useTheme:()=>ee,withTheme:()=>U.withTheme});var c=m(require("react")),b=m(require("@twilio-paste/animation-library")),y=m(require("@twilio-paste/styling-library"));var r=m(require("@twilio-paste/design-tokens"));var f=(e,t,a,o,p,d,T,w,C,n,_,I,P)=>{let X=[n.size40,n.size100,n.size120];return{shadows:C,borderWidths:a,radii:o,breakpoints:X,textColors:I,borderColors:t,backgroundColors:e,fonts:p,fontSizes:d,fontWeights:T,lineHeights:w,widths:n,maxWidths:n,minWidths:n,heights:n,maxHeights:n,minHeights:n,sizes:n,iconSizes:{sizeIcon10:n.sizeIcon10,sizeIcon20:n.sizeIcon20,sizeIcon30:n.sizeIcon30,sizeIcon40:n.sizeIcon40,sizeIcon50:n.sizeIcon50,sizeIcon60:n.sizeIcon60,sizeIcon70:n.sizeIcon70,sizeIcon80:n.sizeIcon80,sizeIcon90:n.sizeIcon90,sizeIcon100:n.sizeIcon100,sizeIcon110:n.sizeIcon110},space:_,zIndices:P}};var x=f(r.backgroundColors,r.borderColors,r.borderWidths,r.radii,r.fonts,r.fontSizes,r.fontWeights,r.lineHeights,r.boxShadows,r.sizings,r.spacings,r.textColors,r.zIndices);var s=m(require("@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.common"));var S=f(s.backgroundColors,s.borderColors,s.borderWidths,s.radii,s.fonts,s.fontSizes,s.fontWeights,s.lineHeights,s.boxShadows,s.sizings,s.spacings,s.textColors,s.zIndices);var i=m(require("@twilio-paste/design-tokens/dist/themes/console/tokens.common"));var k=f(i.backgroundColors,i.borderColors,i.borderWidths,i.radii,i.fonts,i.fontSizes,i.fontWeights,i.lineHeights,i.boxShadows,i.sizings,i.spacings,i.textColors,i.zIndices);var V=m(require("@twilio-paste/styling-library")),v=V.css({html:{fontSize:"100%"},body:{margin:0,fontSize:"fontSize30"},"*, *::after, *::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"*":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});var B=m(require("@twilio-paste/styling-library")),G=B.css({color:"colorText",fontSize:"fontSize30",fontFamily:"fontFamilyText",lineHeight:"lineHeight30",fontWeight:"fontWeightNormal",fontVariantNumeric:"tabular-nums"});var D=m(require("@twilio-paste/styling-library")),F=D.EmotionCSS`
+var q=Object.create,g=Object.defineProperty,Y=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty,$=Object.getOwnPropertyNames,j=Object.getOwnPropertyDescriptor,D=Object.getOwnPropertySymbols,J=Object.prototype.propertyIsEnumerable;var p=Object.assign,V=e=>g(e,"__esModule",{value:!0});var x=(e,t)=>{var m={};for(var o in e)E.call(e,o)&&t.indexOf(o)<0&&(m[o]=e[o]);if(e!=null&&D)for(var o of D(e))t.indexOf(o)<0&&J.call(e,o)&&(m[o]=e[o]);return m};var Q=(e,t)=>{V(e);for(var m in t)g(e,m,{get:t[m],enumerable:!0})},ee=(e,t,m)=>{if(V(e),t&&typeof t=="object"||typeof t=="function")for(let o of $(t))!E.call(e,o)&&o!=="default"&&g(e,o,{get:()=>t[o],enumerable:!(m=j(t,o))||m.enumerable});return e},l=e=>e&&e.__esModule?e:ee(g(e!=null?q(Y(e)):{},"default",{value:e,enumerable:!0}),e);Q(exports,{ConsoleTheme:()=>b,DarkTheme:()=>w,DefaultTheme:()=>k,SendGridTheme:()=>S,StyledBase:()=>W,Theme:()=>ne,ThemeVariants:()=>c,generateThemeFromTokens:()=>f,generateTokensFromTheme:()=>re,pasteBaseStyles:()=>z,pasteFonts:()=>R,pasteGlobalStyles:()=>G,remToPx:()=>ie,useTheme:()=>oe,withTheme:()=>O.withTheme});var y=l(require("react")),C=l(require("@twilio-paste/animation-library")),d=l(require("@twilio-paste/styling-library"));var r=l(require("@twilio-paste/design-tokens"));var f=(e,t,m,o,h,T,u,I,_,a,P,v,F)=>{let Z=[a.size40,a.size100,a.size120];return{shadows:_,borderWidths:m,radii:o,breakpoints:Z,textColors:v,borderColors:t,backgroundColors:e,fonts:h,fontSizes:T,fontWeights:u,lineHeights:I,widths:a,maxWidths:a,minWidths:a,heights:a,maxHeights:a,minHeights:a,sizes:a,iconSizes:{sizeIcon10:a.sizeIcon10,sizeIcon20:a.sizeIcon20,sizeIcon30:a.sizeIcon30,sizeIcon40:a.sizeIcon40,sizeIcon50:a.sizeIcon50,sizeIcon60:a.sizeIcon60,sizeIcon70:a.sizeIcon70,sizeIcon80:a.sizeIcon80,sizeIcon90:a.sizeIcon90,sizeIcon100:a.sizeIcon100,sizeIcon110:a.sizeIcon110},space:P,zIndices:F}};var k=f(r.backgroundColors,r.borderColors,r.borderWidths,r.radii,r.fonts,r.fontSizes,r.fontWeights,r.lineHeights,r.boxShadows,r.sizings,r.spacings,r.textColors,r.zIndices);var s=l(require("@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.common"));var S=f(s.backgroundColors,s.borderColors,s.borderWidths,s.radii,s.fonts,s.fontSizes,s.fontWeights,s.lineHeights,s.boxShadows,s.sizings,s.spacings,s.textColors,s.zIndices);var i=l(require("@twilio-paste/design-tokens/dist/themes/console/tokens.common"));var b=f(i.backgroundColors,i.borderColors,i.borderWidths,i.radii,i.fonts,i.fontSizes,i.fontWeights,i.lineHeights,i.boxShadows,i.sizings,i.spacings,i.textColors,i.zIndices);var n=l(require("@twilio-paste/design-tokens/dist/themes/dark/tokens.common"));var w=f(n.backgroundColors,n.borderColors,n.borderWidths,n.radii,n.fonts,n.fontSizes,n.fontWeights,n.lineHeights,n.boxShadows,n.sizings,n.spacings,n.textColors,n.zIndices);var H=l(require("@twilio-paste/styling-library")),G=H.css({html:{fontSize:"100%"},body:{margin:0,fontSize:"fontSize30"},"*, *::after, *::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"*":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});var B=l(require("@twilio-paste/styling-library")),z=B.css({color:"colorText",fontSize:"fontSize30",fontFamily:"fontFamilyText",lineHeight:"lineHeight30",fontWeight:"fontWeightNormal",fontVariantNumeric:"tabular-nums"});var L=l(require("@twilio-paste/styling-library")),R=L.EmotionCSS`
 /* -------------------------------------------------------
@@ -72,2 +72,2 @@ Variable font.
 }
-`;var h={DEFAULT:"default",CONSOLE:"console",SENDGRID:"sendgrid",FLEX:"flex"};var z=y.styled.div(G);function Q(e,t){switch(e){case h.SENDGRID:return l(l({},S),{breakpoints:t||S.breakpoints});case h.CONSOLE:return l(l({},k),{breakpoints:t||k.breakpoints});case h.FLEX:case h.DEFAULT:default:return l(l({},x),{breakpoints:t||x.breakpoints})}}var H=p=>{var{customBreakpoints:e,theme:t=h.DEFAULT,disableAnimations:a=!1}=p,o=g(p,["customBreakpoints","theme","disableAnimations"]);let d=b.useReducedMotion();c.useEffect(()=>{b.Globals.assign({skipAnimation:a||d})},[d]);let T=Q(t,e);return c.createElement(y.ThemeProvider,{theme:T},c.createElement(y.StylingGlobals,{styles:v({theme:T})}),c.createElement(y.StylingGlobals,{styles:F}),c.createElement(z,l({},o)))};var L=m(require("react")),M=m(require("@twilio-paste/styling-library")),N=a=>{var{children:e}=a,t=g(a,["children"]);if(e==null||typeof e!="function")throw new Error("[ThemeConsumer]: You must pass a function as children");return L.createElement(M.ThemeContext.Consumer,null,o=>{let p=o;return e(l(l({},t),{theme:p}))})};var U=m(require("@twilio-paste/styling-library"));var A=m(require("react")),O=m(require("@twilio-paste/styling-library")),ee=()=>{let e=A.useContext(O.ThemeContext);if(!e)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return e};var te=(e,t,a,o,p,d,T,w,C,n,_,I,P)=>({boxShadows:C,borderWidths:a,radii:o,textColors:I,borderColors:t,backgroundColors:e,fonts:p,fontSizes:d,fontWeights:T,lineHeights:w,sizings:n,spacings:_,zIndices:P});var oe=16,re=(e,t="number")=>{let a=typeof e=="string"?Number.parseFloat(e.replace("rem","")):e,o=Math.round(a*oe);return t==="number"?o:`${o}px`};var se={Provider:H,Consumer:N};
+`;var c={DEFAULT:"default",CONSOLE:"console",SENDGRID:"sendgrid",FLEX:"flex",DARK:"dark"};var W=d.styled.div(z);function te(e,t){switch(e){case c.DARK:return p(p({},w),{breakpoints:t||w.breakpoints});case c.SENDGRID:return p(p({},S),{breakpoints:t||S.breakpoints});case c.CONSOLE:return p(p({},b),{breakpoints:t||b.breakpoints});case c.FLEX:case c.DEFAULT:default:return p(p({},k),{breakpoints:t||k.breakpoints})}}var M=h=>{var{customBreakpoints:e,theme:t=c.DEFAULT,disableAnimations:m=!1}=h,o=x(h,["customBreakpoints","theme","disableAnimations"]);let T=C.useReducedMotion();y.useEffect(()=>{C.Globals.assign({skipAnimation:m||T})},[T]);let u=te(t,e);return y.createElement(d.ThemeProvider,{theme:u},y.createElement(d.StylingGlobals,{styles:G({theme:u})}),y.createElement(d.StylingGlobals,{styles:R}),y.createElement(W,p({},o)))};var A=l(require("react")),N=l(require("@twilio-paste/styling-library")),U=m=>{var{children:e}=m,t=x(m,["children"]);if(e==null||typeof e!="function")throw new Error("[ThemeConsumer]: You must pass a function as children");return A.createElement(N.ThemeContext.Consumer,null,o=>{let h=o;return e(p(p({},t),{theme:h}))})};var O=l(require("@twilio-paste/styling-library"));var X=l(require("react")),K=l(require("@twilio-paste/styling-library")),oe=()=>{let e=X.useContext(K.ThemeContext);if(!e)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return e};var re=(e,t,m,o,h,T,u,I,_,a,P,v,F)=>({boxShadows:_,borderWidths:m,radii:o,textColors:v,borderColors:t,backgroundColors:e,fonts:h,fontSizes:T,fontWeights:u,lineHeights:I,sizings:a,spacings:P,zIndices:F});var se=16,ie=(e,t="number")=>{let m=typeof e=="string"?Number.parseFloat(e.replace("rem","")):e,o=Math.round(m*se);return t==="number"?o:`${o}px`};var ne={Provider:M,Consumer:U};

dist/themes/index.d.ts

 import { DefaultTheme } from './default';
 import { SendGridTheme } from './sendgrid';
 import { ConsoleTheme } from './console';
-export { DefaultTheme, ConsoleTheme, SendGridTheme };
+import { DarkTheme } from './dark';
+export { DefaultTheme, ConsoleTheme, SendGridTheme, DarkTheme };
 //# sourceMappingURL=index.d.ts.map

dist/types/themes.d.ts

@@ -1,8 +0,10 @@
-import { DefaultTheme } from '../themes/default';
-import { SendGridTheme } from '../themes/sendgrid';
-import { ConsoleTheme } from '../themes/console';
+import type { DefaultTheme } from '../themes/default';
+import type { SendGridTheme } from '../themes/sendgrid';
+import type { ConsoleTheme } from '../themes/console';
+import type { DarkTheme } from '../themes/dark';
 export declare type SendGridThemeShape = typeof SendGridTheme;
 export declare type ConsoleThemeShape = typeof ConsoleTheme;
+export declare type DarkThemeShape = typeof DarkTheme;
 export declare type ThemeShape = typeof DefaultTheme;
 export declare type GenericThemeShape = keyof ThemeShape;
 //# sourceMappingURL=themes.d.ts.map

package.json

 {
   "name": "@twilio-paste/theme",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Paste Design System Theme Package which provides support for APIs to theme UIs and components.",
@@ -35,4 +35,4 @@ "author": "Twilio Inc.",
     "@twilio-paste/animation-library": "^0.3.1",
-    "@twilio-paste/design-tokens": "^6.6.0",
-    "@twilio-paste/styling-library": "^0.3.1",
+    "@twilio-paste/design-tokens": "^6.7.0",
+    "@twilio-paste/styling-library": "^0.3.2",
     "@twilio-paste/types": "^3.1.1",
@@ -39,0 +39,0 @@ "react": "^16.8.6",

No alert changes

Improved metrics

Total package byte prevSize

299026

increased by1.6%

Number of package files

46

increased by4.55%

Lines of code

732

increased by12.96%

No dependency changes