`;
}
@@ -156,8 +215,8 @@ class TokenDisplay extends ThemeMixin(LitElement) {
switch (this.tokenType) {
case 'color':
return this.colorTemplate(cssLiteral, opts);
- case 'border':
- return this.borderTemplate(cssLiteral, opts);
+ case 'radii':
+ return this.radiiTemplate(cssLiteral, opts);
case 'typography':
return this.typographyTemplate(cssLiteral, opts);
case 'spacing':
@@ -188,20 +247,11 @@ class TokenDisplay extends ThemeMixin(LitElement) {
}
render() {
- let entries = Object.entries(this.tokens);
- if (this.tokenType === 'spacing') {
- entries = entries.sort((a, b) => {
- let _a = a[0] === 'px' ? '0.25' : a[0];
- let _b = b[0] === 'px' ? '0.25' : b[0];
- return _a - _b;
- });
- }
-
return html`
${this.cssMixin
? this.cssMixinTemplate()
- : entries.map(
+ : this.sortTokens().map(
(entry) => html`
${this.tokenTemplate(entry[1], { key: entry[0] })}
diff --git a/tokens/index.js b/tokens/index.js
new file mode 100644
index 0000000..2952a82
--- /dev/null
+++ b/tokens/index.js
@@ -0,0 +1,4 @@
+export * as colors from '~/colors/src/_colors.js';
+export * as radii from '~/radii/src/_radii.js';
+export * as typography from '~/typography/src/_typography.js';
+export * as spacing from '~/spacing/src/_spacing.js';
diff --git a/tokens/package.json b/tokens/package.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/tokens/package.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/tokens/tokens.css b/tokens/tokens.css
new file mode 100644
index 0000000..6bde19e
--- /dev/null
+++ b/tokens/tokens.css
@@ -0,0 +1,169 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 29 Nov 2021 12:01:04 GMT
+ */
+
+:root {
+ --simba-colors-cool-gray-50: #F9FAFB;
+ --simba-colors-cool-gray-100: #F3F4F6;
+ --simba-colors-cool-gray-200: #E5E7EB;
+ --simba-colors-cool-gray-300: #D1D5DB;
+ --simba-colors-cool-gray-400: #9CA3AF;
+ --simba-colors-cool-gray-500: #6B7280;
+ --simba-colors-cool-gray-600: #4B5563;
+ --simba-colors-cool-gray-700: #374151;
+ --simba-colors-cool-gray-800: #1F2937;
+ --simba-colors-cool-gray-900: #111827;
+ --simba-colors-red-50: #FEF2F2;
+ --simba-colors-red-100: #FEE2E2;
+ --simba-colors-red-200: #FECACA;
+ --simba-colors-red-300: #FCA5A5;
+ --simba-colors-red-400: #F87171;
+ --simba-colors-red-500: #EF4444;
+ --simba-colors-red-600: #DC2626;
+ --simba-colors-red-700: #B91C1C;
+ --simba-colors-red-800: #991B1B;
+ --simba-colors-red-900: #7F1D1D;
+ --simba-colors-amber-50: #FFFBEB;
+ --simba-colors-amber-100: #FEF3C7;
+ --simba-colors-amber-200: #FDE68A;
+ --simba-colors-amber-300: #FCD34D;
+ --simba-colors-amber-400: #FBBF24;
+ --simba-colors-amber-500: #F59E0B;
+ --simba-colors-amber-600: #D97706;
+ --simba-colors-amber-700: #B45309;
+ --simba-colors-amber-800: #92400E;
+ --simba-colors-amber-900: #78350F;
+ --simba-colors-emerald-50: #ECFDF5;
+ --simba-colors-emerald-100: #D1FAE5;
+ --simba-colors-emerald-200: #A7F3D0;
+ --simba-colors-emerald-300: #6EE7B7;
+ --simba-colors-emerald-400: #34D399;
+ --simba-colors-emerald-500: #10B981;
+ --simba-colors-emerald-600: #059669;
+ --simba-colors-emerald-700: #047857;
+ --simba-colors-emerald-800: #065F46;
+ --simba-colors-emerald-900: #064E3B;
+ --simba-colors-blue-50: #EFF6FF;
+ --simba-colors-blue-100: #DBEAFE;
+ --simba-colors-blue-200: #BFDBFE;
+ --simba-colors-blue-300: #93C5FD;
+ --simba-colors-blue-400: #60A5FA;
+ --simba-colors-blue-500: #3B82F6;
+ --simba-colors-blue-600: #2563EB;
+ --simba-colors-blue-700: #1D4ED8;
+ --simba-colors-blue-800: #1E40AF;
+ --simba-colors-blue-900: #1E3A8A;
+ --simba-colors-indigo-50: #EEF2FF;
+ --simba-colors-indigo-100: #E0E7FF;
+ --simba-colors-indigo-200: #C7D2FE;
+ --simba-colors-indigo-300: #A5B4FC;
+ --simba-colors-indigo-400: #818CF8;
+ --simba-colors-indigo-500: #6366F1;
+ --simba-colors-indigo-600: #4F46E5;
+ --simba-colors-indigo-700: #4338CA;
+ --simba-colors-indigo-800: #3730A3;
+ --simba-colors-indigo-900: #312E81;
+ --simba-colors-purple-50: #F5F3FF;
+ --simba-colors-purple-100: #EDE9FE;
+ --simba-colors-purple-200: #DDD6FE;
+ --simba-colors-purple-300: #C4B5FD;
+ --simba-colors-purple-400: #A78BFA;
+ --simba-colors-purple-500: #8B5CF6;
+ --simba-colors-purple-600: #7C3AED;
+ --simba-colors-purple-700: #6D28D9;
+ --simba-colors-purple-800: #5B21B6;
+ --simba-colors-purple-900: #4C1D95;
+ --simba-colors-pink-50: #FDF2F8;
+ --simba-colors-pink-100: #FCE7F3;
+ --simba-colors-pink-200: #FBCFE8;
+ --simba-colors-pink-300: #F9A8D4;
+ --simba-colors-pink-400: #F472B6;
+ --simba-colors-pink-500: #EC4899;
+ --simba-colors-pink-600: #DB2777;
+ --simba-colors-pink-700: #BE185D;
+ --simba-colors-pink-800: #9D174D;
+ --simba-colors-pink-900: #831843;
+ --simba-radii-none: 0;
+ --simba-radii-sm: 0.125rem;
+ --simba-radii-base: 0.25rem;
+ --simba-radii-md: 0.375rem;
+ --simba-radii-lg: 0.5rem;
+ --simba-radii-xl: 0.75rem;
+ --simba-radii-xl2: 1rem;
+ --simba-radii-xl3: 1.5rem;
+ --simba-radii-full: 9999px;
+ --simba-spacing-s0: 0px;
+ --simba-spacing-px: 1px;
+ --simba-spacing-s0-5: 0.125rem;
+ --simba-spacing-s1: 0.25rem;
+ --simba-spacing-s1-5: 0.375rem;
+ --simba-spacing-s2: 0.5rem;
+ --simba-spacing-s2-5: 0.625rem;
+ --simba-spacing-s3: 0.75rem;
+ --simba-spacing-s3-5: 0.875rem;
+ --simba-spacing-s4: 1rem;
+ --simba-spacing-s5: 1.25rem;
+ --simba-spacing-s6: 1.5rem;
+ --simba-spacing-s7: 1.75rem;
+ --simba-spacing-s8: 2rem;
+ --simba-spacing-s9: 2.25rem;
+ --simba-spacing-s10: 2.5rem;
+ --simba-spacing-s11: 2.75rem;
+ --simba-spacing-s12: 3rem;
+ --simba-spacing-s14: 3.5rem;
+ --simba-spacing-s16: 4rem;
+ --simba-spacing-s20: 5rem;
+ --simba-spacing-s24: 6rem;
+ --simba-spacing-s28: 7rem;
+ --simba-spacing-s32: 8rem;
+ --simba-spacing-s36: 9rem;
+ --simba-spacing-s40: 10rem;
+ --simba-spacing-s44: 11rem;
+ --simba-spacing-s48: 12rem;
+ --simba-spacing-s52: 13rem;
+ --simba-spacing-s56: 14rem;
+ --simba-spacing-s60: 15rem;
+ --simba-spacing-s64: 16rem;
+ --simba-spacing-s72: 18rem;
+ --simba-spacing-s80: 20rem;
+ --simba-spacing-s96: 24rem;
+ --simba-typography-family-sans: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+ --simba-typography-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+ --simba-typography-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+ --simba-typography-weight-thin: 100;
+ --simba-typography-weight-extralight: 200;
+ --simba-typography-weight-light: 300;
+ --simba-typography-weight-normal: 400;
+ --simba-typography-weight-medium: 500;
+ --simba-typography-weight-semibold: 600;
+ --simba-typography-weight-bold: 700;
+ --simba-typography-weight-extrabold: 800;
+ --simba-typography-weight-black: 900;
+ --simba-typography-size-xs-size: 0.75rem;
+ --simba-typography-size-xs-line-height: 1rem;
+ --simba-typography-size-sm-size: 0.875rem;
+ --simba-typography-size-sm-line-height: 1.25rem;
+ --simba-typography-size-base-size: 1rem;
+ --simba-typography-size-base-line-height: 1.5rem;
+ --simba-typography-size-lg-size: 1.125rem;
+ --simba-typography-size-lg-line-height: 1.75rem;
+ --simba-typography-size-xl-size: 1.25rem;
+ --simba-typography-size-xl-line-height: 1.75rem;
+ --simba-typography-size-2xl-size: 1.5rem;
+ --simba-typography-size-2xl-line-height: 2rem;
+ --simba-typography-size-3xl-size: 1.875rem;
+ --simba-typography-size-3xl-line-height: 2.25rem;
+ --simba-typography-size-4xl-size: 2.25rem;
+ --simba-typography-size-4xl-line-height: 2.5rem;
+ --simba-typography-size-5xl-size: 3rem;
+ --simba-typography-size-5xl-line-height: 1rem;
+ --simba-typography-size-6xl-size: 3.75rem;
+ --simba-typography-size-6xl-line-height: 1;
+ --simba-typography-size-7xl-size: 4.5rem;
+ --simba-typography-size-7xl-line-height: 1;
+ --simba-typography-size-8xl-size: 6rem;
+ --simba-typography-size-8xl-line-height: 1;
+ --simba-typography-size-9xl-size: 8rem;
+ --simba-typography-size-9xl-line-height: 1;
+}
diff --git a/tooltip/doc/index.md b/tooltip/doc/index.md
index dc4be6a..cb5e727 100644
--- a/tooltip/doc/index.md
+++ b/tooltip/doc/index.md
@@ -7,8 +7,25 @@ Interactive content should not be placed in a tooltip content slot. Tooltips are
```js script
import { html } from '~/core';
import '~/icons/simba-icon.js';
-import '../simba-tooltip.js';
-import { red, amber, emerald, blue } from '~/colors';
+import '@divriots/starter-simba/tooltip/simba-tooltip.js';
+import {
+ red400,
+ red700,
+ amber400,
+ amber700,
+ emerald400,
+ emerald700,
+ blue400,
+ blue700,
+} from '~/colors';
+```
+
+## Usage
+
+Import the custom element definition file.
+
+```js
+import '@divriots/starter-simba/tooltip/simba-tooltip.js';
```
```js preview-story
@@ -16,7 +33,7 @@ export const tooltip = () => html`
@@ -42,35 +59,35 @@ export const placements = () => html`
}
[icon-id$='error'] {
- fill: ${red[700]};
+ fill: ${red700};
}
[icon-id$='warning'] {
- fill: ${amber[700]};
+ fill: ${amber700};
}
[icon-id$='success'] {
- fill: ${emerald[700]};
+ fill: ${emerald700};
}
[icon-id$='info'] {
- fill: ${blue[700]};
+ fill: ${blue700};
}
html[theme='dark'] [icon-id$='error'] {
- fill: ${red[400]};
+ fill: ${red400};
}
html[theme='dark'] [icon-id$='warning'] {
- fill: ${amber[400]};
+ fill: ${amber400};
}
html[theme='dark'] [icon-id$='success'] {
- fill: ${emerald[400]};
+ fill: ${emerald400};
}
html[theme='dark'] [icon-id$='info'] {
- fill: ${blue[400]};
+ fill: ${blue400};
}
diff --git a/tooltip/src/SimbaTooltip.js b/tooltip/src/SimbaTooltip.js
index df8b972..8c3cd93 100644
--- a/tooltip/src/SimbaTooltip.js
+++ b/tooltip/src/SimbaTooltip.js
@@ -1,8 +1,8 @@
import { LionTooltip } from '@lion/tooltip';
import { css, html } from '~/core';
-import { coolGray } from '~/colors';
-import { spacing } from '~/spacing';
-import { borderRadiusMixin } from '~/borders';
+import { coolGray50 } from '~/colors';
+import { s1_5, s2 } from '~/spacing';
+import { base } from '~/radii';
export class SimbaTooltip extends LionTooltip {
static get styles() {
@@ -19,10 +19,10 @@ export class SimbaTooltip extends LionTooltip {
}
#overlay-content-node-wrapper {
- padding: ${spacing['1.5']} ${spacing['2']};
+ padding: ${s1_5} ${s2};
background-color: var(--simba-color-primary-900);
- color: ${coolGray[50]};
- ${borderRadiusMixin()};
+ color: ${coolGray50};
+ border-radius: ${base};
}
`,
];
diff --git a/tsconfig.json b/tsconfig.json
index 246aa7c..8c4e3e2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,12 @@
"module": "ESNext",
"moduleResolution": "Node",
"paths": {
- "~/*": ["/*"]
+ "~/*": [
+ "/*"
+ ],
+ "@divriots/starter-simba/*": [
+ "/*"
+ ]
}
}
-}
+}
\ No newline at end of file
diff --git a/typography/doc/index.md b/typography/doc/index.md
index ec655c8..c8abbac 100644
--- a/typography/doc/index.md
+++ b/typography/doc/index.md
@@ -3,25 +3,44 @@
```js script
import { html } from '~/core';
import '~/token-display';
-import { typographyMixin as _typographyMixin } from '../src/typography.css.js';
+import * as typography from '~/typography';
```
## Usage
-The color palettes are tokenized as CSS tagged literals (CSSResult) which can be used directly inside `static get styles`.
+The typography parts are tokenized as CSS tagged literals (CSSResult) which can be used directly inside `static get styles`.
+
+You can import the token group from the main entrypoint (or `/tokens`):
+
+```js
+import { typography } from '@divriots/starter-simba'; // typography.familyMono
+```
+
+or a specific color from the token entrypoint:
+
+```js
+import { familyMono } from '@divriots/starter-simba/typography';
+```
```js preview-story
-import { css, LitElement } from '~/core';
-import { indigo } from '~/colors';
import { ThemeMixin } from 'dark-theme-utils';
-import { typographyMixin } from '../src/typography.css.js';
+import { css, LitElement } from '@divriots/starter-simba';
+import {
+ familySans,
+ sizeXlSize,
+ sizeXlLineHeight,
+ weightSemibold,
+} from '@divriots/starter-simba/typography';
class DemoTypography extends ThemeMixin(LitElement) {
static get styles() {
return css`
:host {
color: var(--simba-color-primary-700);
- ${typographyMixin('sans', 'xl', 'semibold')};
+ font-family: ${familySans};
+ font-size: ${sizeXlSize};
+ line-height: ${sizeXlLineHeight};
+ font-weight: ${weightSemibold};
transition: var(--theme-color-transition);
}
@@ -40,119 +59,71 @@ customElements.define('demo-typography', DemoTypography);
export const usageInCE = () => html``;
```
-## CSS Values only
-
-It is also possible to only grab `family`, `size` or `weight` e.g. to create CSS custom properties,
-instead of using the mixin to grab the full set of typography declarations.
-
-```js
-import { css } from '~/core';
-import { family, size, weight } from '../src/typography.css.js';
-
-css`
- :host {
- --simba-font-sans: ${family['sans']};
- --simba-font-serif: ${family['serif']};
- --simba-font-mono: ${family['mono']};
- --simba-font-size-base: ${size['base'].size};
- --simba-font-line-height-base: ${size['base'].lineHeight};
- --simba-font-weight-normal: ${weight['normal']};
- }
-`;
-```
-
## Family
-You can specify the family of the font as the first parameter.
-
-E.g. for monospace:
-
-```js
-typographyMixin('mono');
-```
+You can specify the family of the font.
```js story
export const family = () =>
html`
+ entry[0].startsWith('family')
+ )}
>
`;
```
## Sizes
-You can specify the size of font as the second parameter.
-
-E.g. for large font-size:
-
-```js
-typographyMixin('sans', 'lg');
-```
+You can specify the size of font, which goes hand in hand with line-height.
```js story
export const sizes = () =>
html`
entry[0].startsWith('size') && entry[0].endsWith('Size')
+ )}
>
`;
```
-## Weights
-
-You can specify the weight of font as the third parameter.
+## Line Heights
-E.g. for large font-size:
+You can specify the line height, line heights and sizes go hand in hand.
-```js
-typographyMixin('sans', 'lg', 'bold');
+```js story
+export const lineHeights = () =>
+ html`
+
+ entry[0].startsWith('size') && entry[0].endsWith('LineHeight')
+ )}
+ >
+ `;
```
+## Weights
+
+You can get different font weights.
+
```js story
export const weights = () =>
html`
+ entry[0].startsWith('weight')
+ )}
>
`;
```
diff --git a/typography/index.js b/typography/index.js
index 4df73b3..545ab51 100644
--- a/typography/index.js
+++ b/typography/index.js
@@ -1 +1 @@
-export * from './src/index.js';
+export * from './src/_typography.js';
diff --git a/typography/src/_typography.js b/typography/src/_typography.js
new file mode 100644
index 0000000..37feafe
--- /dev/null
+++ b/typography/src/_typography.js
@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 02 Dec 2021 13:44:16 GMT
+ */
+
+import { css } from '@lion/core';
+
+export const familySans = css`'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`;
+export const familySerif = css`ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`;
+export const familyMono = css`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`;
+export const weightThin = css`100`;
+export const weightExtralight = css`200`;
+export const weightLight = css`300`;
+export const weightNormal = css`400`;
+export const weightMedium = css`500`;
+export const weightSemibold = css`600`;
+export const weightBold = css`700`;
+export const weightExtrabold = css`800`;
+export const weightBlack = css`900`;
+export const sizeXsSize = css`0.75rem`;
+export const sizeXsLineHeight = css`1rem`;
+export const sizeSmSize = css`0.875rem`;
+export const sizeSmLineHeight = css`1.25rem`;
+export const sizeBaseSize = css`1rem`;
+export const sizeBaseLineHeight = css`1.5rem`;
+export const sizeLgSize = css`1.125rem`;
+export const sizeLgLineHeight = css`1.75rem`;
+export const sizeXlSize = css`1.25rem`;
+export const sizeXlLineHeight = css`1.75rem`;
+export const size2xlSize = css`1.5rem`;
+export const size2xlLineHeight = css`2rem`;
+export const size3xlSize = css`1.875rem`;
+export const size3xlLineHeight = css`2.25rem`;
+export const size4xlSize = css`2.25rem`;
+export const size4xlLineHeight = css`2.5rem`;
+export const size5xlSize = css`3rem`;
+export const size5xlLineHeight = css`1rem`;
+export const size6xlSize = css`3.75rem`;
+export const size6xlLineHeight = css`1`;
+export const size7xlSize = css`4.5rem`;
+export const size7xlLineHeight = css`1`;
+export const size8xlSize = css`6rem`;
+export const size8xlLineHeight = css`1`;
+export const size9xlSize = css`8rem`;
+export const size9xlLineHeight = css`1`;
diff --git a/typography/src/index.js b/typography/src/index.js
deleted file mode 100644
index 53363fc..0000000
--- a/typography/src/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './typography.css.js';
diff --git a/typography/src/typography.css.js b/typography/src/typography.css.js
deleted file mode 100644
index 95ac2b7..0000000
--- a/typography/src/typography.css.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { css } from '~/core';
-
-export const family = {
- sans: css`'Inter var', ui-sans-serif, system-ui, -apple-system,
- BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
- sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
- 'Noto Color Emoji'`,
- serif: css` ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`,
- mono: css`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
- 'Liberation Mono', 'Courier New', monospace`,
-};
-
-// prettier-ignore
-export const size = {
- xs: {
- size: css`0.75rem`,
- lineHeight: css`1rem`
- },
- sm: {
- size: css`0.875rem`,
- lineHeight: css`1.25rem`,
- },
- base: {
- size: css`1rem`,
- lineHeight: css`1.5rem`,
- },
- lg:{
- size: css`1.125rem`,
- lineHeight: css`1.75rem`,
- },
- xl:{
- size: css`1.25rem`,
- lineHeight: css`1.75rem`,
- },
- '2xl': {
- size: css`1.5rem`,
- lineHeight: css`2rem`,
- },
- '3xl': {
- size: css`1.875rem`,
- lineHeight: css`2.25rem`,
- },
- '4xl':{
- size:css`2.25rem` ,
- lineHeight:css`2.5rem` ,
- },
- '5xl':{
- size: css`3rem`,
- lineHeight: css`1`,
- },
- '6xl':{
- size:css`3.75rem` ,
- lineHeight: css`1`,
- },
- '7xl':{
- size: css`4.5rem`,
- lineHeight: css`1`,
- },
- '8xl':{
- size: css`6rem`,
- lineHeight: css`1`,
- },
- '9xl': {
- size: css`8rem`,
- lineHeight: css`1`,
- },
-};
-
-export const weight = {
- thin: css`100`,
- extralight: css`200`,
- light: css`300`,
- normal: css`400`,
- medium: css`500`,
- semibold: css`600`,
- bold: css`700`,
- extrabold: css`800`,
- black: css`900`,
-};
-
-export const typographyMixin = (_family, _size, _weight) => {
- if (!_family) {
- _family = 'sans';
- }
-
- if (!_size) {
- _size = 'base';
- }
-
- if (!_weight) {
- _weight = 'normal';
- }
-
- // prettier-ignore
- const output = css`font-family: ${family[_family]};
-font-size: ${size[_size].size};
-line-height: ${size[_size].lineHeight};
-font-weight: ${weight[_weight]};`;
-
- return output;
-};
diff --git a/typography/src/typography.tokens.js b/typography/src/typography.tokens.js
new file mode 100644
index 0000000..f684134
--- /dev/null
+++ b/typography/src/typography.tokens.js
@@ -0,0 +1,82 @@
+export default {
+ typography: {
+ family: {
+ sans: {
+ value:
+ "'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+ },
+ serif: {
+ value: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+ },
+ mono: {
+ value:
+ "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+ },
+ },
+ weight: {
+ thin: { value: 100 },
+ extralight: { value: 200 },
+ light: { value: 300 },
+ normal: { value: 400 },
+ medium: { value: 500 },
+ semibold: { value: 600 },
+ bold: { value: 700 },
+ extrabold: { value: 800 },
+ black: { value: 900 },
+ },
+ size: {
+ xs: {
+ size: { value: '0.75rem' },
+ lineHeight: { value: '1rem' },
+ },
+ sm: {
+ size: { value: '0.875rem' },
+ lineHeight: { value: '1.25rem' },
+ },
+ base: {
+ size: { value: '1rem' },
+ lineHeight: { value: '1.5rem' },
+ },
+ lg: {
+ size: { value: '1.125rem' },
+ lineHeight: { value: '1.75rem' },
+ },
+ xl: {
+ size: { value: '1.25rem' },
+ lineHeight: { value: '1.75rem' },
+ },
+ '2xl': {
+ size: { value: '1.5rem' },
+ lineHeight: { value: '2rem' },
+ },
+ '3xl': {
+ size: { value: '1.875rem' },
+ lineHeight: { value: '2.25rem' },
+ },
+ '4xl': {
+ size: { value: '2.25rem' },
+ lineHeight: { value: '2.5rem' },
+ },
+ '5xl': {
+ size: { value: '3rem' },
+ lineHeight: { value: '1rem' },
+ },
+ '6xl': {
+ size: { value: '3.75rem' },
+ lineHeight: { value: 1 },
+ },
+ '7xl': {
+ size: { value: '4.5rem' },
+ lineHeight: { value: 1 },
+ },
+ '8xl': {
+ size: { value: '6rem' },
+ lineHeight: { value: 1 },
+ },
+ '9xl': {
+ size: { value: '8rem' },
+ lineHeight: { value: 1 },
+ },
+ },
+ },
+};
diff --git a/validation-feedback/doc/index.md b/validation-feedback/doc/index.md
index 42bae3d..4ec640e 100644
--- a/validation-feedback/doc/index.md
+++ b/validation-feedback/doc/index.md
@@ -2,7 +2,7 @@
```js script
import { html } from '~/core';
-import '../simba-validation-feedback.js';
+import '@divriots/starter-simba/validation-feedback/simba-validation-feedback.js';
```
Validation feedback is useful for giving the user feedback about the values they assigned to input fields in a form.
@@ -16,6 +16,12 @@ The component can be used standalone, but relies on `feedbackData` property to c
Below is an example of using the component as standalone.
+Import the custom element definition file.
+
+```js
+import '@divriots/starter-simba/validation-feedback/simba-validation-feedback.js';
+```
+
```js preview-story
export const feedback = () =>
html`
diff --git a/validation-feedback/src/styles.css.js b/validation-feedback/src/styles.css.js
index 7a06a48..b457a28 100644
--- a/validation-feedback/src/styles.css.js
+++ b/validation-feedback/src/styles.css.js
@@ -1,13 +1,28 @@
import { css } from '~/core';
-import { red, amber, emerald, blue } from '~/colors';
-import { typographyMixin } from '~/typography';
+import {
+ red400,
+ red500,
+ red600,
+ red700,
+ amber400,
+ amber500,
+ amber700,
+ emerald400,
+ emerald500,
+ emerald700,
+ blue400,
+ blue500,
+ blue700,
+} from '~/colors';
+import { sizeSmSize, sizeSmLineHeight } from '~/typography';
export default css`
:host {
display: block;
- color: ${red[600]};
+ color: ${red600};
margin-top: 2px;
- ${typographyMixin('sans', 'sm')};
+ font-size: ${sizeSmSize};
+ line-height: ${sizeSmLineHeight};
}
.feedback-container {
@@ -22,42 +37,42 @@ export default css`
}
.error {
- fill: ${red[500]};
- color: ${red[700]};
+ fill: ${red500};
+ color: ${red700};
}
.warning {
- fill: ${amber[500]};
- color: ${amber[700]};
+ fill: ${amber500};
+ color: ${amber700};
}
.success {
- fill: ${emerald[500]};
- color: ${emerald[700]};
+ fill: ${emerald500};
+ color: ${emerald700};
}
.info {
- fill: ${blue[500]};
- color: ${blue[700]};
+ fill: ${blue500};
+ color: ${blue700};
}
:host([theme='dark']) .error {
- fill: ${red[400]};
- color: ${red[400]};
+ fill: ${red400};
+ color: ${red400};
}
:host([theme='dark']) .warning {
- fill: ${amber[400]};
- color: ${amber[400]};
+ fill: ${amber400};
+ color: ${amber400};
}
:host([theme='dark']) .success {
- fill: ${emerald[400]};
- color: ${emerald[400]};
+ fill: ${emerald400};
+ color: ${emerald400};
}
:host([theme='dark']) .info {
- fill: ${blue[400]};
- color: ${blue[400]};
+ fill: ${blue400};
+ color: ${blue400};
}
`;