Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@next][inline-message] refactor to use tokens #462

Merged
merged 1 commit into from
Feb 1, 2024
Merged

[@next][inline-message] refactor to use tokens #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"update-deps": "npm-check-updates --peer -u && npm install && npm run lint"
},
"dependencies": {
"@floating-ui/dom": "^1.5.3",
"@floating-ui/dom": "~1.5.3",
"@material/animation": "^14.0.0",
"@material/button": "^14.0.0",
"@material/card": "^14.0.0",
Expand Down
46 changes: 7 additions & 39 deletions src/dev/pages/inline-message/inline-message.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,22 @@
<div class="vert">
<forge-inline-message>
<forge-icon slot="icon" name="notifications"></forge-icon>
<div slot="title">Info-primary theme (default)</div>
<div>Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.</div>
<forge-icon slot="icon" name="info"></forge-icon>
<div slot="title">Default (info theme)</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.</div>
</forge-inline-message>

<forge-inline-message>
<div slot="title">No icon</div>
<div>Irure quis enim labore qui deserunt ea fugiat.</div>
</forge-inline-message>

<forge-inline-message>
<forge-icon slot="icon" name="notifications"></forge-icon>
<div>No title. Mollit id in est sit in mollit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.</div>
</forge-inline-message>

<forge-inline-message>
<div>No title. No icon. Mollit id in est sit in mollit.</div>
</forge-inline-message>

<forge-inline-message theme="info-secondary">
<forge-icon slot="icon" name="info"></forge-icon>
<div slot="title">Info-secondary theme</div>
<div>
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.</div>
</forge-inline-message>

<forge-inline-message theme="danger">
<div slot="title">Danger theme</div>
<forge-icon slot="icon" name="cancel"></forge-icon>
<div>Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.</div>
</forge-inline-message>

<forge-inline-message theme="warning">
<forge-icon slot="icon" name="warning"></forge-icon>
<div slot="title">Warning theme</div>
<div>Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.</div>
</forge-inline-message>

<forge-inline-message theme="success">
<forge-icon slot="icon" name="check"></forge-icon>
<div slot="title">Success theme</div>
<div>
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
Irure quis enim labore qui deserunt ea fugiat. Mollit id in est sit in mollit.
</div>
<forge-inline-message>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore harum illo quam aperiam hic quis perspiciatis ea laborum quia suscipit corporis cumque, accusantium, atque odit odio excepturi amet? Commodi, perferendis.</div>
</forge-inline-message>
</div>

Expand Down
20 changes: 19 additions & 1 deletion src/dev/pages/inline-message/inline-message.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,25 @@
include('./src/partials/page.ejs', {
page: {
title: 'Inline message',
includePath: './pages/inline-message/inline-message.ejs'
includePath: './pages/inline-message/inline-message.ejs',
options: [
{
type: 'select',
label: 'Theme',
id: 'opt-theme',
defaultValue: 'info',
options: [
{ label: 'Primary', value: 'primary' },
{ label: 'Secondary', value: 'secondary' },
{ label: 'Tertiary', value: 'tertiary' },
{ label: 'Success', value: 'success' },
{ label: 'Error', value: 'error' },
{ label: 'Warning', value: 'warning' },
{ label: 'Info (default)', value: 'info' },
{ label: 'Info secondary', value: 'info-secondary' }
]
}
]
}
})
%>
23 changes: 14 additions & 9 deletions src/dev/pages/inline-message/inline-message.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import '$src/shared';
import '@tylertech/forge/inline-message';
import '@tylertech/forge/icon';
import { IconRegistry } from '@tylertech/forge/icon';
import { tylIconCancel, tylIconCheck, tylIconInfo, tylIconNotifications, tylIconWarning } from '@tylertech/tyler-icons/standard';
import '@tylertech/forge/inline-message';
import { INLINE_MESSAGE_CONSTANTS } from '@tylertech/forge/inline-message';
import type { ISelectComponent } from '@tylertech/forge/select';
import { tylIconInfo } from '@tylertech/tyler-icons/standard';

IconRegistry.define(tylIconInfo);

const themeSelect = document.getElementById('opt-theme') as ISelectComponent;
themeSelect.addEventListener('change', ({ detail }: CustomEvent<string>) => {
getAllInlineMessages().forEach(el => el.setAttribute('theme', detail));
});

IconRegistry.define([
tylIconNotifications,
tylIconInfo,
tylIconWarning,
tylIconCheck,
tylIconCancel
]);
function getAllInlineMessages(): NodeListOf<HTMLElement> {
return document.querySelectorAll(INLINE_MESSAGE_CONSTANTS.elementName);
}
35 changes: 28 additions & 7 deletions src/dev/pages/theme/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,44 +43,65 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
header: 'Key colors',
swatches: [
{ text: 'Primary', background: 'primary', foreground: 'on-primary' },
{ text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' }
{ text: 'Primary container (minimum)', background: 'primary-container-minimum', foreground: 'on-primary-container-minimum' },
{ text: 'Primary container (low)', background: 'primary-container-low', foreground: 'on-primary-container-low' },
{ text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' },
{ text: 'Primary container (high)', background: 'primary-container-high', foreground: 'on-primary-container-high' }
]
},
{
swatches: [
{ text: 'Secondary', background: 'secondary', foreground: 'on-secondary' },
{ text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' }
{ text: 'Secondary container (minimum)', background: 'secondary-container-minimum', foreground: 'on-secondary-container-minimum' },
{ text: 'Secondary container (low)', background: 'secondary-container-low', foreground: 'on-secondary-container-low'},
{ text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' },
{ text: 'Secondary container (high)', background: 'secondary-container-high', foreground: 'on-secondary-container-high' }
]
},
{
swatches: [
{ text: 'Tertiary', background: 'tertiary', foreground: 'on-tertiary' },
{ text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' }
{ text: 'Tertiary container (minimum)', background: 'tertiary-container-minimum', foreground: 'on-tertiary-container-minimum' },
{ text: 'Tertiary container (low)', background: 'tertiary-container-low', foreground: 'on-tertiary-container-low' },
{ text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' },
{ text: 'Tertiary container (high)', background: 'tertiary-container-high', foreground: 'on-tertiary-container-high' }
]
},
{
header: 'Status',
swatches: [
{ text: 'Success', background: 'success', foreground: 'on-success' },
{ text: 'Success container', background: 'success-container', foreground: 'on-success-container' }
{ text: 'Success container (minimum)', background: 'success-container-minimum', foreground: 'on-success-container-minimum' },
{ text: 'Success container (low)', background: 'success-container-low', foreground: 'on-success-container-low' },
{ text: 'Success container', background: 'success-container', foreground: 'on-success-container' },
{ text: 'Success container (high)', background: 'success-container-high', foreground: 'on-success-container-high' }
]
},
{
swatches: [
{ text: 'Error ', background: 'error', foreground: 'on-error' },
{ text: 'Error container', background: 'error-container', foreground: 'on-error-container' }
{ text: 'Error container (minimum)', background: 'error-container-minimum', foreground: 'on-error-container-minimum' },
{ text: 'Error container (low)', background: 'error-container-low', foreground: 'on-error-container-low' },
{ text: 'Error container', background: 'error-container', foreground: 'on-error-container' },
{ text: 'Error container (high)', background: 'error-container-high', foreground: 'on-error-container-high' }
]
},
{
swatches: [
{ text: 'Warning', background: 'warning', foreground: 'on-warning' },
{ text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' }
{ text: 'Warning container (minimum)', background: 'warning-container-minimum', foreground: 'on-warning-container-minimum' },
{ text: 'Warning container (low)', background: 'warning-container-low', foreground: 'on-warning-container-low' },
{ text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' },
{ text: 'Warning container (high)', background: 'warning-container-high', foreground: 'on-warning-container-high' }
]
},
{
swatches: [
{ text: 'Info', background: 'info', foreground: 'on-info' },
{ text: 'Info container', background: 'info-container', foreground: 'on-info-container' }
{ text: 'Info container (minimum)', background: 'info-container-minimum', foreground: 'on-info-container-minimum' },
{ text: 'Info container (low)', background: 'info-container-low', foreground: 'on-info-container-low' },
{ text: 'Info container', background: 'info-container', foreground: 'on-info-container' },
{ text: 'Info container (high)', background: 'info-container-high', foreground: 'on-info-container-high' }
]
},
{
Expand Down
26 changes: 26 additions & 0 deletions src/lib/core/styles/tokens/inline-message/_tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@use 'sass:map';
@use '../../theme';
@use '../../shape';
@use '../../spacing';
@use '../../border';
@use '../../utils';

$tokens: (
background: utils.module-val(inline-message, background, theme.variable(info-container-low)),
color: utils.module-val(inline-message, color, theme.variable(text-high)),
shape: utils.module-val(inline-message, shape, shape.variable(medium)),
padding: utils.module-val(inline-message, padding, spacing.variable(small)),
padding-inline: utils.module-ref(inline-message, padding-inline, padding),
padding-block: utils.module-ref(inline-message, padding-block, padding),
border-width: utils.module-val(inline-message, border-width, border.variable(thin)),
border-style: utils.module-val(inline-message, border-style, none),
border-color: utils.module-val(inline-message, border-color, theme.variable(info-container)),
gap: utils.module-val(inline-message, gap, spacing.variable(small)),
icon-gap: utils.module-ref(inline-message, icon-gap, gap),
content-gap: utils.module-ref(inline-message, content-gap, gap),
icon-color: utils.module-val(inline-message, icon-color, theme.variable(on-info-container-low))
) !default;

@function get($key) {
@return map.get($tokens, $key);
}
23 changes: 22 additions & 1 deletion src/lib/core/styles/tokens/theme/_token-utils.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,21 @@
$surface-tone: color-utils.tone($surface);

// The container colors are the provided color mixed with the surface color at lower emphasis levels
$container-high: theme-utils.hexify($color, $surface, color-emphasis.value(medium-low));
$container: theme-utils.hexify($color, $surface, color-emphasis.value(low));
$container-low: theme-utils.hexify($color, $surface, color-emphasis.value(lower));
$container-minimum: theme-utils.hexify($color, $surface, color-emphasis.value(minimum));

// The on-color is the contrast color against the provided color
$on-color: theme-utils.contrast($color);

// The on-container colors are the contrast color for the provided color mixed with the
// container color at a lower emphasis to let the contrast color bleed through for
// increased contrast against the lower emphasis container color
$on-container-high: theme-utils.contrast($container-high);
$on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium));
$on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium));
$on-container-minimum: theme-utils.hexify($color, theme-utils.contrast($container-minimum), color-emphasis.value(medium));

// Compute contrast ratio for foreground colors against their corresponding background
$minimum-ratio: 4.5;
Expand All @@ -36,11 +42,26 @@
@if color-utils.contrast-ratio($container, $on-container) < $minimum-ratio {
@warn 'The contrast ratio between "#{$name}-container" and "on-#{$name}-container" is less than 4.5:1.';
}
@if color-utils.contrast-ratio($container-high, $on-container-high) < $minimum-ratio {
@warn 'The contrast ratio between "#{$name}-container-high" and "on-#{$name}-container-high" is less than 4.5:1.';
}
@if color-utils.contrast-ratio($container-low, $on-container-low) < $minimum-ratio {
@warn 'The contrast ratio between "#{$name}-container-low" and "on-#{$name}-container-low" is less than 4.5:1.';
}
@if color-utils.contrast-ratio($container-minimum, $on-container-minimum) < $minimum-ratio {
@warn 'The contrast ratio between "#{$name}-container-minimum" and "on-#{$name}-container-minimum" is less than 4.5:1.';
}

@return (
#{$name}: $color,
#{$name}-container-minimum: $container-minimum,
#{$name}-container-low: $container-low,
#{$name}-container: $container,
#{$name}-container-high: $container-high,
on-#{$name}: $on-color,
on-#{$name}-container: $on-container
on-#{$name}-container-minimum: $on-container-minimum,
on-#{$name}-container-low: $on-container-low,
on-#{$name}-container: $on-container,
on-#{$name}-container-high: $on-container-high
);
}
Loading
Loading