update monospace font styles, support custom width in toniq-chip

Toniq-Labs · Jul 28, 2022 · 341f981 · 341f981
1 parent d267ca4
commit 341f981
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "0.0.15",
+    "version": "0.0.16",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/src/elements/toniq-chip/toniq-chip.element.ts b/src/elements/toniq-chip/toniq-chip.element.ts
@@ -16,6 +16,7 @@ export const ToniqChip = defineToniqElement({
         :host {
             display: inline-flex;
             align-items: center;
+            justify-content: center;
             gap: 4px;
             ${toniqFontStyles.boldLabelFont}
             padding: 4px 8px;

diff --git a/src/elements/toniq-chip/toniq-chip.story.tsx b/src/elements/toniq-chip/toniq-chip.story.tsx
@@ -1,6 +1,6 @@
 import {ArgTypes, ComponentMeta} from '@storybook/react';
 import React from 'react';
-import {allIconsByCategory, Copy16Icon, Icp16Icon} from '../../icons';
+import {allIconsByCategory, Copy16Icon} from '../../icons';
 import {toniqFontStyles} from '../../styles';
 import {cssToReactStyleObject} from '../../styles/css-to-react';
 import {ToniqChip, ToniqIcon} from '../react-components';
@@ -83,14 +83,10 @@ export const mainStory = (controls: Record<keyof typeof chipStoryControls, strin
                         icon={Copy16Icon}
                     />
                     <ToniqChip
+                        style={{width: '200px'}}
                         className={className}
-                        text={'with increased spacing styles'}
-                        icon={Icp16Icon}
-                        style={{
-                            gap: '8px',
-                            paddingRight: '12px',
-                            paddingLeft: '12px',
-                        }}
+                        text={'with custom size'}
+                        icon={Copy16Icon}
                     />
                 </div>
             </>

diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -48,8 +48,8 @@ const fontStylesFallbacks = wrapTypeWithReadonly<
     },
     monospaceFont: {
         'font-family': css`'Inconsolata', monospace`,
+        'line-height': css`1.125em`,
     },
-    boldMonospaceFont: {},
 });
 
 export const toniqFontStylesCssVarNames = mapObject(
@@ -136,15 +136,9 @@ export const toniqFontStyles = (() => {
     `;
 
     const monospaceFont = css`
-        ${paragraphFont};
         ${combineFallbacksAndVars('monospaceFont')}
     `;
 
-    const boldMonospaceFont = css`
-        ${monospaceFont};
-        ${combineFallbacksAndVars('boldFont')};
-    `;
-
     return wrapTypeWithReadonly<Record<FontStyleKey, FontStyleDefinition>>()({
         toniqFont,
         normalWeightFont,
@@ -158,6 +152,5 @@ export const toniqFontStyles = (() => {
         h2Font,
         h3Font,
         monospaceFont,
-        boldMonospaceFont,
     });
 })();