New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@ds-pack/components
Advanced tools
@ds-pack/components - npm Package Compare versions
Comparing version 1.0.14 to 1.0.15
@@ -0,1 +1,6 @@ | ||
| ### 1.0.15 | ||
| - Support defining a local theme to override the default theme, for more details | ||
| see the [Upgrade Guide](./UPGRADE_GUIDE.md) | ||
| ### 1.0.14 | ||
@@ -2,0 +7,0 @@ |
| import './reset.css'; | ||
| export * from './theme'; | ||
| export * from './vars.css'; | ||
@@ -3,0 +4,0 @@ export * from './Box'; |
@@ -9,2 +9,15 @@ "use strict"; | ||
| var _theme = require("./theme"); | ||
| Object.keys(_theme).forEach(function (key) { | ||
| if (key === "default" || key === "__esModule") return; | ||
| if (key in exports && exports[key] === _theme[key]) return; | ||
| Object.defineProperty(exports, key, { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _theme[key]; | ||
| } | ||
| }); | ||
| }); | ||
| var _vars = require("./vars.vanilla"); | ||
@@ -11,0 +24,0 @@ |
@@ -1,8 +0,1 @@ | ||
| interface Breakpoints { | ||
| small: string; | ||
| medium: string; | ||
| large: string; | ||
| extraLarge: string; | ||
| } | ||
| export declare let breakpoints: Breakpoints; | ||
| export {}; | ||
| export declare let breakpoints: Record<string, string>; |
@@ -0,1 +1,346 @@ | ||
| export declare let fontSizes: { | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| 0: string; | ||
| 1: string; | ||
| 2: string; | ||
| 3: string; | ||
| 4: string; | ||
| }; | ||
| export declare let colors: { | ||
| white: string; | ||
| primary: string; | ||
| primaryLight: string; | ||
| primaryDark: string; | ||
| secondary: string; | ||
| secondaryLight: string; | ||
| secondaryDark: string; | ||
| tertiary: string; | ||
| tertiaryLight: string; | ||
| tertiaryDark: string; | ||
| disabledBg: string; | ||
| disabledFill: string; | ||
| black: string; | ||
| gray000: string; | ||
| gray100: string; | ||
| gray200: string; | ||
| gray300: string; | ||
| gray400: string; | ||
| gray500: string; | ||
| gray600: string; | ||
| gray700: string; | ||
| gray800: string; | ||
| gray900: string; | ||
| blue000: string; | ||
| blue100: string; | ||
| blue200: string; | ||
| blue300: string; | ||
| blue400: string; | ||
| blue500: string; | ||
| blue600: string; | ||
| blue700: string; | ||
| blue800: string; | ||
| blue900: string; | ||
| indigo000: string; | ||
| indigo100: string; | ||
| indigo200: string; | ||
| indigo300: string; | ||
| indigo400: string; | ||
| indigo500: string; | ||
| indigo600: string; | ||
| indigo700: string; | ||
| indigo800: string; | ||
| indigo900: string; | ||
| violet000: string; | ||
| violet100: string; | ||
| violet200: string; | ||
| violet300: string; | ||
| violet400: string; | ||
| violet500: string; | ||
| violet600: string; | ||
| violet700: string; | ||
| violet800: string; | ||
| violet900: string; | ||
| fuschia000: string; | ||
| fuschia100: string; | ||
| fuschia200: string; | ||
| fuschia300: string; | ||
| fuschia400: string; | ||
| fuschia500: string; | ||
| fuschia600: string; | ||
| fuschia700: string; | ||
| fuschia800: string; | ||
| fuschia900: string; | ||
| pink000: string; | ||
| pink100: string; | ||
| pink200: string; | ||
| pink300: string; | ||
| pink400: string; | ||
| pink500: string; | ||
| pink600: string; | ||
| pink700: string; | ||
| pink800: string; | ||
| pink900: string; | ||
| red000: string; | ||
| red100: string; | ||
| red200: string; | ||
| red300: string; | ||
| red400: string; | ||
| red500: string; | ||
| red600: string; | ||
| red700: string; | ||
| red800: string; | ||
| red900: string; | ||
| orange000: string; | ||
| orange100: string; | ||
| orange200: string; | ||
| orange300: string; | ||
| orange400: string; | ||
| orange500: string; | ||
| orange600: string; | ||
| orange700: string; | ||
| orange800: string; | ||
| orange900: string; | ||
| yellow000: string; | ||
| yellow100: string; | ||
| yellow200: string; | ||
| yellow300: string; | ||
| yellow400: string; | ||
| yellow500: string; | ||
| yellow600: string; | ||
| yellow700: string; | ||
| yellow800: string; | ||
| yellow900: string; | ||
| lime000: string; | ||
| lime100: string; | ||
| lime200: string; | ||
| lime300: string; | ||
| lime400: string; | ||
| lime500: string; | ||
| lime600: string; | ||
| lime700: string; | ||
| lime800: string; | ||
| lime900: string; | ||
| green000: string; | ||
| green100: string; | ||
| green200: string; | ||
| green300: string; | ||
| green400: string; | ||
| green500: string; | ||
| green600: string; | ||
| green700: string; | ||
| green800: string; | ||
| green900: string; | ||
| teal000: string; | ||
| teal100: string; | ||
| teal200: string; | ||
| teal300: string; | ||
| teal400: string; | ||
| teal500: string; | ||
| teal600: string; | ||
| teal700: string; | ||
| teal800: string; | ||
| teal900: string; | ||
| cyan000: string; | ||
| cyan100: string; | ||
| cyan200: string; | ||
| cyan300: string; | ||
| cyan400: string; | ||
| cyan500: string; | ||
| cyan600: string; | ||
| cyan700: string; | ||
| cyan800: string; | ||
| cyan900: string; | ||
| }; | ||
| export declare let defaultTheme: { | ||
| space: {}; | ||
| fontSizes: { | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| 0: string; | ||
| 1: string; | ||
| 2: string; | ||
| 3: string; | ||
| 4: string; | ||
| }; | ||
| fonts: { | ||
| base: string; | ||
| serif: string; | ||
| monospace: string; | ||
| }; | ||
| fontWeights: { | ||
| base: string; | ||
| bold: string; | ||
| }; | ||
| sizes: { | ||
| content: string; | ||
| }; | ||
| radii: { | ||
| small: string; | ||
| medium: string; | ||
| rounded: string; | ||
| }; | ||
| zIndices: { | ||
| low: string; | ||
| medium: string; | ||
| high: string; | ||
| extraHigh: string; | ||
| top: string; | ||
| }; | ||
| breakpoints: Record<string, string>; | ||
| colors: { | ||
| white: string; | ||
| primary: string; | ||
| primaryLight: string; | ||
| primaryDark: string; | ||
| secondary: string; | ||
| secondaryLight: string; | ||
| secondaryDark: string; | ||
| tertiary: string; | ||
| tertiaryLight: string; | ||
| tertiaryDark: string; | ||
| disabledBg: string; | ||
| disabledFill: string; | ||
| black: string; | ||
| gray000: string; | ||
| gray100: string; | ||
| gray200: string; | ||
| gray300: string; | ||
| gray400: string; | ||
| gray500: string; | ||
| gray600: string; | ||
| gray700: string; | ||
| gray800: string; | ||
| gray900: string; | ||
| blue000: string; | ||
| blue100: string; | ||
| blue200: string; | ||
| blue300: string; | ||
| blue400: string; | ||
| blue500: string; | ||
| blue600: string; | ||
| blue700: string; | ||
| blue800: string; | ||
| blue900: string; | ||
| indigo000: string; | ||
| indigo100: string; | ||
| indigo200: string; | ||
| indigo300: string; | ||
| indigo400: string; | ||
| indigo500: string; | ||
| indigo600: string; | ||
| indigo700: string; | ||
| indigo800: string; | ||
| indigo900: string; | ||
| violet000: string; | ||
| violet100: string; | ||
| violet200: string; | ||
| violet300: string; | ||
| violet400: string; | ||
| violet500: string; | ||
| violet600: string; | ||
| violet700: string; | ||
| violet800: string; | ||
| violet900: string; | ||
| fuschia000: string; | ||
| fuschia100: string; | ||
| fuschia200: string; | ||
| fuschia300: string; | ||
| fuschia400: string; | ||
| fuschia500: string; | ||
| fuschia600: string; | ||
| fuschia700: string; | ||
| fuschia800: string; | ||
| fuschia900: string; | ||
| pink000: string; | ||
| pink100: string; | ||
| pink200: string; | ||
| pink300: string; | ||
| pink400: string; | ||
| pink500: string; | ||
| pink600: string; | ||
| pink700: string; | ||
| pink800: string; | ||
| pink900: string; | ||
| red000: string; | ||
| red100: string; | ||
| red200: string; | ||
| red300: string; | ||
| red400: string; | ||
| red500: string; | ||
| red600: string; | ||
| red700: string; | ||
| red800: string; | ||
| red900: string; | ||
| orange000: string; | ||
| orange100: string; | ||
| orange200: string; | ||
| orange300: string; | ||
| orange400: string; | ||
| orange500: string; | ||
| orange600: string; | ||
| orange700: string; | ||
| orange800: string; | ||
| orange900: string; | ||
| yellow000: string; | ||
| yellow100: string; | ||
| yellow200: string; | ||
| yellow300: string; | ||
| yellow400: string; | ||
| yellow500: string; | ||
| yellow600: string; | ||
| yellow700: string; | ||
| yellow800: string; | ||
| yellow900: string; | ||
| lime000: string; | ||
| lime100: string; | ||
| lime200: string; | ||
| lime300: string; | ||
| lime400: string; | ||
| lime500: string; | ||
| lime600: string; | ||
| lime700: string; | ||
| lime800: string; | ||
| lime900: string; | ||
| green000: string; | ||
| green100: string; | ||
| green200: string; | ||
| green300: string; | ||
| green400: string; | ||
| green500: string; | ||
| green600: string; | ||
| green700: string; | ||
| green800: string; | ||
| green900: string; | ||
| teal000: string; | ||
| teal100: string; | ||
| teal200: string; | ||
| teal300: string; | ||
| teal400: string; | ||
| teal500: string; | ||
| teal600: string; | ||
| teal700: string; | ||
| teal800: string; | ||
| teal900: string; | ||
| cyan000: string; | ||
| cyan100: string; | ||
| cyan200: string; | ||
| cyan300: string; | ||
| cyan400: string; | ||
| cyan500: string; | ||
| cyan600: string; | ||
| cyan700: string; | ||
| cyan800: string; | ||
| cyan900: string; | ||
| }; | ||
| focusShadow: string; | ||
| }; | ||
| export declare let themeClass: string, vars: import("@vanilla-extract/private").MapLeafNodes<{ | ||
@@ -40,3 +385,3 @@ space: {}; | ||
| }; | ||
| breakpoints: any; | ||
| breakpoints: Record<string, string>; | ||
| colors: { | ||
@@ -43,0 +388,0 @@ white: string; |
@@ -5,6 +5,12 @@ 'use strict'; | ||
| var colors = {black:'#374047',gray000:'#f8f9f9',gray100:'#ebedee',gray200:'#dee1e3',gray300:'#cfd3d6',gray400:'#bec4c8',gray500:'#acb4b9',gray600:'#97a1a7',gray700:'#7f8a93',gray800:'#5f6e78',gray900:'#374047',blue000:'#e4f0f9',blue100:'#c6e1f3',blue200:'#a5cfed',blue300:'#7db9e5',blue400:'#4a9eda',blue500:'#0077cc',blue600:'#006bb7',blue700:'#005da0',blue800:'#004d84',blue900:'#00365d',indigo000:'#eaebfa',indigo100:'#d2d5f6',indigo200:'#b7bbf0',indigo300:'#959ce9',indigo400:'#6872e0',indigo500:'#0011cc',indigo600:'#000fb7',indigo700:'#000da0',indigo800:'#000a83',indigo900:'#00075c',violet000:'#f0e9fa',violet100:'#e1d2f6',violet200:'#ceb6f0',violet300:'#b894e9',violet400:'#9966e0',violet500:'#5500cc',violet600:'#4c00b8',violet700:'#4300a1',violet800:'#370084',violet900:'#27005e',fuschia000:'#f9e9fa',fuschia100:'#f2d1f5',fuschia200:'#ebb5f0',fuschia300:'#e293e9',fuschia400:'#d665e0',fuschia500:'#bb00cc',fuschia600:'#a900b8',fuschia700:'#9400a2',fuschia800:'#7b0086',fuschia900:'#580061',pink000:'#fae9f3',pink100:'#f5d1e6',pink200:'#f0b6d8',pink300:'#e994c6',pink400:'#e066ad',pink500:'#cc0077',pink600:'#b8006b',pink700:'#a2005e',pink800:'#86004e',pink900:'#610038',red000:'#faeaeb',red100:'#f6d2d5',red200:'#f0b7bc',red300:'#ea969d',red400:'#e16973',red500:'#cc0011',red600:'#b8000f',red700:'#a2000d',red800:'#86000b',red900:'#610008',orange000:'#f9ede4',orange100:'#f3d9c6',orange200:'#ecc2a4',orange300:'#e4a87c',orange400:'#da864a',orange500:'#cc5500',orange600:'#b84c00',orange700:'#a04300',orange800:'#843700',orange900:'#5e2700',yellow000:'#f8f6de',yellow100:'#f1ecba',yellow200:'#e9e293',yellow300:'#e0d668',yellow400:'#d7c938',yellow500:'#ccbb00',yellow600:'#b8a900',yellow700:'#a29400',yellow800:'#867b00',yellow900:'#615800',lime000:'#eef8df',lime100:'#dcf1bd',lime200:'#c7ea97',lime300:'#b1e16c',lime400:'#96d73b',lime500:'#77cc00',lime600:'#6bb800',lime700:'#5ea200',lime800:'#4e8600',lime900:'#386100',green000:'#e5f9e4',green100:'#c9f3c6',green200:'#a9eca3',green300:'#84e47b',green400:'#54da48',green500:'#11cc00',green600:'#0fb800',green700:'#0da200',green800:'#0b8600',green900:'#086100',teal000:'#e3f9ec',teal100:'#c5f3d8',teal200:'#a2ecc1',teal300:'#79e4a6',teal400:'#46da84',teal500:'#00cc55',teal600:'#00b84c',teal700:'#00a243',teal800:'#008638',teal900:'#006128',cyan000:'#e3f9f7',cyan100:'#c4f3ef',cyan200:'#a0ece5',cyan300:'#77e3da',cyan400:'#44d9cd',cyan500:'#00ccbb',cyan600:'#00b8a9',cyan700:'#00a294',cyan800:'#00867b',cyan900:'#006159',white:'#fdfefe',primary:'#0077cc',primaryLight:'#a5cfed',primaryDark:'#005da0',secondary:'#00cc55',secondaryLight:'#a2ecc1',secondaryDark:'#00a243',tertiary:'#5500cc',tertiaryLight:'#ceb6f0',tertiaryDark:'#4300a1',disabledBg:'#dee1e3',disabledFill:'#acb4b9'}; | ||
| var defaultTheme = {space:{'0':'0px','1':'4px','2':'8px','3':'12px','4':'16px','5':'20px','6':'24px','7':'28px','8':'32px','9':'36px','10':'40px'},fontSizes:{'0':'16px','1':'20px','2':'25px','3':'31.25px','4':'39.0625px',h1:'39.0625px',h2:'31.25px',h3:'25px',h4:'20px',h5:'16px',h6:'16px'},fonts:{base:'system-ui, sans-serif',serif:'"Times New Roman", serif',monospace:'monospace'},fontWeights:{base:'500',bold:'700'},sizes:{content:'60em'},radii:{small:'4px',medium:'1rem',rounded:'50%'},zIndices:{low:'1',medium:'5',high:'10',extraHigh:'20',top:'50'},breakpoints:{small:'20em',medium:'40em',large:'60em',extraLarge:'80em'},colors:{black:'#374047',gray000:'#f8f9f9',gray100:'#ebedee',gray200:'#dee1e3',gray300:'#cfd3d6',gray400:'#bec4c8',gray500:'#acb4b9',gray600:'#97a1a7',gray700:'#7f8a93',gray800:'#5f6e78',gray900:'#374047',blue000:'#e4f0f9',blue100:'#c6e1f3',blue200:'#a5cfed',blue300:'#7db9e5',blue400:'#4a9eda',blue500:'#0077cc',blue600:'#006bb7',blue700:'#005da0',blue800:'#004d84',blue900:'#00365d',indigo000:'#eaebfa',indigo100:'#d2d5f6',indigo200:'#b7bbf0',indigo300:'#959ce9',indigo400:'#6872e0',indigo500:'#0011cc',indigo600:'#000fb7',indigo700:'#000da0',indigo800:'#000a83',indigo900:'#00075c',violet000:'#f0e9fa',violet100:'#e1d2f6',violet200:'#ceb6f0',violet300:'#b894e9',violet400:'#9966e0',violet500:'#5500cc',violet600:'#4c00b8',violet700:'#4300a1',violet800:'#370084',violet900:'#27005e',fuschia000:'#f9e9fa',fuschia100:'#f2d1f5',fuschia200:'#ebb5f0',fuschia300:'#e293e9',fuschia400:'#d665e0',fuschia500:'#bb00cc',fuschia600:'#a900b8',fuschia700:'#9400a2',fuschia800:'#7b0086',fuschia900:'#580061',pink000:'#fae9f3',pink100:'#f5d1e6',pink200:'#f0b6d8',pink300:'#e994c6',pink400:'#e066ad',pink500:'#cc0077',pink600:'#b8006b',pink700:'#a2005e',pink800:'#86004e',pink900:'#610038',red000:'#faeaeb',red100:'#f6d2d5',red200:'#f0b7bc',red300:'#ea969d',red400:'#e16973',red500:'#cc0011',red600:'#b8000f',red700:'#a2000d',red800:'#86000b',red900:'#610008',orange000:'#f9ede4',orange100:'#f3d9c6',orange200:'#ecc2a4',orange300:'#e4a87c',orange400:'#da864a',orange500:'#cc5500',orange600:'#b84c00',orange700:'#a04300',orange800:'#843700',orange900:'#5e2700',yellow000:'#f8f6de',yellow100:'#f1ecba',yellow200:'#e9e293',yellow300:'#e0d668',yellow400:'#d7c938',yellow500:'#ccbb00',yellow600:'#b8a900',yellow700:'#a29400',yellow800:'#867b00',yellow900:'#615800',lime000:'#eef8df',lime100:'#dcf1bd',lime200:'#c7ea97',lime300:'#b1e16c',lime400:'#96d73b',lime500:'#77cc00',lime600:'#6bb800',lime700:'#5ea200',lime800:'#4e8600',lime900:'#386100',green000:'#e5f9e4',green100:'#c9f3c6',green200:'#a9eca3',green300:'#84e47b',green400:'#54da48',green500:'#11cc00',green600:'#0fb800',green700:'#0da200',green800:'#0b8600',green900:'#086100',teal000:'#e3f9ec',teal100:'#c5f3d8',teal200:'#a2ecc1',teal300:'#79e4a6',teal400:'#46da84',teal500:'#00cc55',teal600:'#00b84c',teal700:'#00a243',teal800:'#008638',teal900:'#006128',cyan000:'#e3f9f7',cyan100:'#c4f3ef',cyan200:'#a0ece5',cyan300:'#77e3da',cyan400:'#44d9cd',cyan500:'#00ccbb',cyan600:'#00b8a9',cyan700:'#00a294',cyan800:'#00867b',cyan900:'#006159',white:'#fdfefe',primary:'#0077cc',primaryLight:'#a5cfed',primaryDark:'#005da0',secondary:'#00cc55',secondaryLight:'#a2ecc1',secondaryDark:'#00a243',tertiary:'#5500cc',tertiaryLight:'#ceb6f0',tertiaryDark:'#4300a1',disabledBg:'#dee1e3',disabledFill:'#acb4b9'},focusShadow:'0 0 4px 2px #005da0'}; | ||
| var fontSizes = {'0':'16px','1':'20px','2':'25px','3':'31.25px','4':'39.0625px',h1:'39.0625px',h2:'31.25px',h3:'25px',h4:'20px',h5:'16px',h6:'16px'}; | ||
| var themeClass = 'vars_themeClass__1ngcs9h0'; | ||
| var vars = {space:{'0':'var(--space-0__1ngcs9h1)','1':'var(--space-1__1ngcs9h2)','2':'var(--space-2__1ngcs9h3)','3':'var(--space-3__1ngcs9h4)','4':'var(--space-4__1ngcs9h5)','5':'var(--space-5__1ngcs9h6)','6':'var(--space-6__1ngcs9h7)','7':'var(--space-7__1ngcs9h8)','8':'var(--space-8__1ngcs9h9)','9':'var(--space-9__1ngcs9ha)','10':'var(--space-10__1ngcs9hb)'},fontSizes:{'0':'var(--fontSizes-0__1ngcs9hc)','1':'var(--fontSizes-1__1ngcs9hd)','2':'var(--fontSizes-2__1ngcs9he)','3':'var(--fontSizes-3__1ngcs9hf)','4':'var(--fontSizes-4__1ngcs9hg)',h1:'var(--fontSizes-h1__1ngcs9hh)',h2:'var(--fontSizes-h2__1ngcs9hi)',h3:'var(--fontSizes-h3__1ngcs9hj)',h4:'var(--fontSizes-h4__1ngcs9hk)',h5:'var(--fontSizes-h5__1ngcs9hl)',h6:'var(--fontSizes-h6__1ngcs9hm)'},fonts:{base:'var(--fonts-base__1ngcs9hn)',serif:'var(--fonts-serif__1ngcs9ho)',monospace:'var(--fonts-monospace__1ngcs9hp)'},fontWeights:{base:'var(--fontWeights-base__1ngcs9hq)',bold:'var(--fontWeights-bold__1ngcs9hr)'},sizes:{content:'var(--sizes-content__1ngcs9hs)'},radii:{small:'var(--radii-small__1ngcs9ht)',medium:'var(--radii-medium__1ngcs9hu)',rounded:'var(--radii-rounded__1ngcs9hv)'},zIndices:{low:'var(--zIndices-low__1ngcs9hw)',medium:'var(--zIndices-medium__1ngcs9hx)',high:'var(--zIndices-high__1ngcs9hy)',extraHigh:'var(--zIndices-extraHigh__1ngcs9hz)',top:'var(--zIndices-top__1ngcs9h10)'},breakpoints:{small:'var(--breakpoints-small__1ngcs9h11)',medium:'var(--breakpoints-medium__1ngcs9h12)',large:'var(--breakpoints-large__1ngcs9h13)',extraLarge:'var(--breakpoints-extraLarge__1ngcs9h14)'},colors:{black:'var(--colors-black__1ngcs9h15)',gray000:'var(--colors-gray000__1ngcs9h16)',gray100:'var(--colors-gray100__1ngcs9h17)',gray200:'var(--colors-gray200__1ngcs9h18)',gray300:'var(--colors-gray300__1ngcs9h19)',gray400:'var(--colors-gray400__1ngcs9h1a)',gray500:'var(--colors-gray500__1ngcs9h1b)',gray600:'var(--colors-gray600__1ngcs9h1c)',gray700:'var(--colors-gray700__1ngcs9h1d)',gray800:'var(--colors-gray800__1ngcs9h1e)',gray900:'var(--colors-gray900__1ngcs9h1f)',blue000:'var(--colors-blue000__1ngcs9h1g)',blue100:'var(--colors-blue100__1ngcs9h1h)',blue200:'var(--colors-blue200__1ngcs9h1i)',blue300:'var(--colors-blue300__1ngcs9h1j)',blue400:'var(--colors-blue400__1ngcs9h1k)',blue500:'var(--colors-blue500__1ngcs9h1l)',blue600:'var(--colors-blue600__1ngcs9h1m)',blue700:'var(--colors-blue700__1ngcs9h1n)',blue800:'var(--colors-blue800__1ngcs9h1o)',blue900:'var(--colors-blue900__1ngcs9h1p)',indigo000:'var(--colors-indigo000__1ngcs9h1q)',indigo100:'var(--colors-indigo100__1ngcs9h1r)',indigo200:'var(--colors-indigo200__1ngcs9h1s)',indigo300:'var(--colors-indigo300__1ngcs9h1t)',indigo400:'var(--colors-indigo400__1ngcs9h1u)',indigo500:'var(--colors-indigo500__1ngcs9h1v)',indigo600:'var(--colors-indigo600__1ngcs9h1w)',indigo700:'var(--colors-indigo700__1ngcs9h1x)',indigo800:'var(--colors-indigo800__1ngcs9h1y)',indigo900:'var(--colors-indigo900__1ngcs9h1z)',violet000:'var(--colors-violet000__1ngcs9h20)',violet100:'var(--colors-violet100__1ngcs9h21)',violet200:'var(--colors-violet200__1ngcs9h22)',violet300:'var(--colors-violet300__1ngcs9h23)',violet400:'var(--colors-violet400__1ngcs9h24)',violet500:'var(--colors-violet500__1ngcs9h25)',violet600:'var(--colors-violet600__1ngcs9h26)',violet700:'var(--colors-violet700__1ngcs9h27)',violet800:'var(--colors-violet800__1ngcs9h28)',violet900:'var(--colors-violet900__1ngcs9h29)',fuschia000:'var(--colors-fuschia000__1ngcs9h2a)',fuschia100:'var(--colors-fuschia100__1ngcs9h2b)',fuschia200:'var(--colors-fuschia200__1ngcs9h2c)',fuschia300:'var(--colors-fuschia300__1ngcs9h2d)',fuschia400:'var(--colors-fuschia400__1ngcs9h2e)',fuschia500:'var(--colors-fuschia500__1ngcs9h2f)',fuschia600:'var(--colors-fuschia600__1ngcs9h2g)',fuschia700:'var(--colors-fuschia700__1ngcs9h2h)',fuschia800:'var(--colors-fuschia800__1ngcs9h2i)',fuschia900:'var(--colors-fuschia900__1ngcs9h2j)',pink000:'var(--colors-pink000__1ngcs9h2k)',pink100:'var(--colors-pink100__1ngcs9h2l)',pink200:'var(--colors-pink200__1ngcs9h2m)',pink300:'var(--colors-pink300__1ngcs9h2n)',pink400:'var(--colors-pink400__1ngcs9h2o)',pink500:'var(--colors-pink500__1ngcs9h2p)',pink600:'var(--colors-pink600__1ngcs9h2q)',pink700:'var(--colors-pink700__1ngcs9h2r)',pink800:'var(--colors-pink800__1ngcs9h2s)',pink900:'var(--colors-pink900__1ngcs9h2t)',red000:'var(--colors-red000__1ngcs9h2u)',red100:'var(--colors-red100__1ngcs9h2v)',red200:'var(--colors-red200__1ngcs9h2w)',red300:'var(--colors-red300__1ngcs9h2x)',red400:'var(--colors-red400__1ngcs9h2y)',red500:'var(--colors-red500__1ngcs9h2z)',red600:'var(--colors-red600__1ngcs9h30)',red700:'var(--colors-red700__1ngcs9h31)',red800:'var(--colors-red800__1ngcs9h32)',red900:'var(--colors-red900__1ngcs9h33)',orange000:'var(--colors-orange000__1ngcs9h34)',orange100:'var(--colors-orange100__1ngcs9h35)',orange200:'var(--colors-orange200__1ngcs9h36)',orange300:'var(--colors-orange300__1ngcs9h37)',orange400:'var(--colors-orange400__1ngcs9h38)',orange500:'var(--colors-orange500__1ngcs9h39)',orange600:'var(--colors-orange600__1ngcs9h3a)',orange700:'var(--colors-orange700__1ngcs9h3b)',orange800:'var(--colors-orange800__1ngcs9h3c)',orange900:'var(--colors-orange900__1ngcs9h3d)',yellow000:'var(--colors-yellow000__1ngcs9h3e)',yellow100:'var(--colors-yellow100__1ngcs9h3f)',yellow200:'var(--colors-yellow200__1ngcs9h3g)',yellow300:'var(--colors-yellow300__1ngcs9h3h)',yellow400:'var(--colors-yellow400__1ngcs9h3i)',yellow500:'var(--colors-yellow500__1ngcs9h3j)',yellow600:'var(--colors-yellow600__1ngcs9h3k)',yellow700:'var(--colors-yellow700__1ngcs9h3l)',yellow800:'var(--colors-yellow800__1ngcs9h3m)',yellow900:'var(--colors-yellow900__1ngcs9h3n)',lime000:'var(--colors-lime000__1ngcs9h3o)',lime100:'var(--colors-lime100__1ngcs9h3p)',lime200:'var(--colors-lime200__1ngcs9h3q)',lime300:'var(--colors-lime300__1ngcs9h3r)',lime400:'var(--colors-lime400__1ngcs9h3s)',lime500:'var(--colors-lime500__1ngcs9h3t)',lime600:'var(--colors-lime600__1ngcs9h3u)',lime700:'var(--colors-lime700__1ngcs9h3v)',lime800:'var(--colors-lime800__1ngcs9h3w)',lime900:'var(--colors-lime900__1ngcs9h3x)',green000:'var(--colors-green000__1ngcs9h3y)',green100:'var(--colors-green100__1ngcs9h3z)',green200:'var(--colors-green200__1ngcs9h40)',green300:'var(--colors-green300__1ngcs9h41)',green400:'var(--colors-green400__1ngcs9h42)',green500:'var(--colors-green500__1ngcs9h43)',green600:'var(--colors-green600__1ngcs9h44)',green700:'var(--colors-green700__1ngcs9h45)',green800:'var(--colors-green800__1ngcs9h46)',green900:'var(--colors-green900__1ngcs9h47)',teal000:'var(--colors-teal000__1ngcs9h48)',teal100:'var(--colors-teal100__1ngcs9h49)',teal200:'var(--colors-teal200__1ngcs9h4a)',teal300:'var(--colors-teal300__1ngcs9h4b)',teal400:'var(--colors-teal400__1ngcs9h4c)',teal500:'var(--colors-teal500__1ngcs9h4d)',teal600:'var(--colors-teal600__1ngcs9h4e)',teal700:'var(--colors-teal700__1ngcs9h4f)',teal800:'var(--colors-teal800__1ngcs9h4g)',teal900:'var(--colors-teal900__1ngcs9h4h)',cyan000:'var(--colors-cyan000__1ngcs9h4i)',cyan100:'var(--colors-cyan100__1ngcs9h4j)',cyan200:'var(--colors-cyan200__1ngcs9h4k)',cyan300:'var(--colors-cyan300__1ngcs9h4l)',cyan400:'var(--colors-cyan400__1ngcs9h4m)',cyan500:'var(--colors-cyan500__1ngcs9h4n)',cyan600:'var(--colors-cyan600__1ngcs9h4o)',cyan700:'var(--colors-cyan700__1ngcs9h4p)',cyan800:'var(--colors-cyan800__1ngcs9h4q)',cyan900:'var(--colors-cyan900__1ngcs9h4r)',white:'var(--colors-white__1ngcs9h4s)',primary:'var(--colors-primary__1ngcs9h4t)',primaryLight:'var(--colors-primaryLight__1ngcs9h4u)',primaryDark:'var(--colors-primaryDark__1ngcs9h4v)',secondary:'var(--colors-secondary__1ngcs9h4w)',secondaryLight:'var(--colors-secondaryLight__1ngcs9h4x)',secondaryDark:'var(--colors-secondaryDark__1ngcs9h4y)',tertiary:'var(--colors-tertiary__1ngcs9h4z)',tertiaryLight:'var(--colors-tertiaryLight__1ngcs9h50)',tertiaryDark:'var(--colors-tertiaryDark__1ngcs9h51)',disabledBg:'var(--colors-disabledBg__1ngcs9h52)',disabledFill:'var(--colors-disabledFill__1ngcs9h53)'},focusShadow:'var(--focusShadow__1ngcs9h54)'}; | ||
| exports.colors = colors; | ||
| exports.defaultTheme = defaultTheme; | ||
| exports.fontSizes = fontSizes; | ||
| exports.themeClass = themeClass; | ||
| exports.vars = vars; |
| { | ||
| "name": "@ds-pack/components", | ||
| "version": "1.0.14", | ||
| "version": "1.0.15", | ||
| "main": "dist/index.js", | ||
@@ -5,0 +5,0 @@ "source": "src/index.ts", |
| import './reset.css' | ||
| export * from './theme' | ||
| export * from './vars.css' | ||
@@ -4,0 +5,0 @@ export * from './Box' |
| let baseBreakpoint = 20 | ||
| interface Breakpoints { | ||
| small: string | ||
| medium: string | ||
| large: string | ||
| extraLarge: string | ||
| } | ||
| export let breakpoints = [ | ||
@@ -16,3 +9,3 @@ ['small', baseBreakpoint], | ||
| ].reduce( | ||
| (acc, [label, val]): Partial<Breakpoints> => ({ | ||
| (acc, [label, val]): Partial<Record<string, string>> => ({ | ||
| ...acc, | ||
@@ -22,2 +15,2 @@ [label]: `${val}em`, | ||
| {}, | ||
| ) as Breakpoints | ||
| ) as Record<string, string> |
| import { createTheme } from '@vanilla-extract/css' | ||
| import { breakpoints } from './theme' | ||
| import { modularScale } from 'polished' | ||
| /** | ||
| * Inlined from styled-components/polished package | ||
| */ | ||
| function modularScale( | ||
| steps: number, | ||
| base: number, | ||
| ratio: number = 1.333, | ||
| ): string { | ||
| return `${base * ratio ** steps}` | ||
| } | ||
| function createScale(ratio: number, base: number) { | ||
@@ -21,3 +31,3 @@ return function (steps: number) { | ||
| let fontSizes = { | ||
| export let fontSizes = { | ||
| ...baseFontSizes, | ||
@@ -166,3 +176,3 @@ h1: baseFontSizes[4], | ||
| let colors = { | ||
| export let colors = { | ||
| ...baseColors, | ||
@@ -183,3 +193,3 @@ white: '#fdfefe', | ||
| export let [themeClass, vars] = createTheme({ | ||
| export let defaultTheme = { | ||
| space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40].reduce( | ||
@@ -200,2 +210,3 @@ (acc, val, idx) => ({ ...acc, [idx]: `${val}px` }), | ||
| sizes: { | ||
| // @TODO: Change this to `ch` units | ||
| content: '60em', | ||
@@ -215,5 +226,7 @@ }, | ||
| }, | ||
| breakpoints: breakpoints as any, | ||
| breakpoints, | ||
| colors, | ||
| focusShadow: `0 0 4px 2px ${colors.primaryDark}`, | ||
| }) | ||
| } | ||
| export let [themeClass, vars] = createTheme<typeof defaultTheme>(defaultTheme) |
@@ -0,1 +1,9 @@ | ||
| ### 1.0.14 -> 1.0.15 | ||
| This change shouldn't require any additional changes if you're consuming the | ||
| library as-is, however it does allow you to define a custom theme, either | ||
| extending the default or starting from scratch! | ||
| See [docs on vars](./src/vars.md) for more details! | ||
| ### 1.0.13 -> 1.0.14 | ||
@@ -2,0 +10,0 @@ |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by5.04%
361913
- Number of package files
- increased by4.19%
323
- Lines of code
- increased by6.08%
7576
No dependency changes