-
Notifications
You must be signed in to change notification settings - Fork 205
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into obtp-index-prop
- Loading branch information
Showing
26 changed files
with
810 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-alert-background-warning-light: $md-yellow-10 !default; | ||
$md-alert-background-warning-dark: $md-yellow-80 !default; | ||
$md-alert-background-error-light: $md-red-10 !default; | ||
$md-alert-background-error-dark: $md-red-80 !default; | ||
$md-alert-background-theme-light: $md-theme-10 !default; | ||
$md-alert-background-theme-dark: $md-theme-80 !default; | ||
$md-alert-background-success-light: $md-green-10 !default; | ||
$md-alert-background-success-dark: $md-green-80 !default; | ||
$md-alert-text-warning-light: $md-yellow-70 !default; | ||
$md-alert-text-warning-dark: $md-yellow-40 !default; | ||
$md-alert-text-error-light: $md-red-70 !default; | ||
$md-alert-text-error-dark: $md-red-40 !default; | ||
$md-alert-text-theme-light: $md-theme-70 !default; | ||
$md-alert-text-theme-dark: $md-theme-40 !default; | ||
$md-alert-text-success-light: $md-green-70 !default; | ||
$md-alert-text-success-dark: $md-green-40 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-avatar-cobalt-light: $md-cobalt-30 !default; | ||
$md-avatar-cobalt-dark: $md-cobalt-30 !default; | ||
$md-avatar-cyan-light: $md-cyan-30 !default; | ||
$md-avatar-cyan-dark: $md-cyan-30 !default; | ||
$md-avatar-gold-light: $md-gold-30 !default; | ||
$md-avatar-gold-dark: $md-gold-30 !default; | ||
$md-avatar-gray-light: $md-gray-30 !default; | ||
$md-avatar-gray-dark: $md-gray-30 !default; | ||
$md-avatar-lime-light: $md-lime-30 !default; | ||
$md-avatar-lime-dark: $md-lime-30 !default; | ||
$md-avatar-mint-light: $md-mint-30 !default; | ||
$md-avatar-mint-dark: $md-mint-30 !default; | ||
$md-avatar-orange-light: $md-orange-30 !default; | ||
$md-avatar-orange-dark: $md-orange-30 !default; | ||
$md-avatar-pink-light: $md-pink-30 !default; | ||
$md-avatar-pink-dark: $md-pink-30 !default; | ||
$md-avatar-purple-light: $md-purple-30 !default; | ||
$md-avatar-purple-dark: $md-purple-30 !default; | ||
$md-avatar-slate-light: $md-slate-30 !default; | ||
$md-avatar-slate-dark: $md-slate-30 !default; | ||
$md-avatar-violet-light: $md-violet-30 !default; | ||
$md-avatar-violet-dark: $md-violet-30 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-background-primary-light: $md-white !default; | ||
$md-background-primary-dark: $md-gray-100 !default; | ||
$md-background-secondary-light: $md-gray-05 !default; | ||
$md-background-secondary-dark: $md-gray-95 !default; | ||
$md-background-tertiary-light: $md-gray-10 !default; | ||
$md-background-tertiary-dark: $md-gray-90 !default; | ||
$md-background-quaternary-light: $md-gray-20 !default; | ||
$md-background-quaternary-dark: $md-gray-80 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-button-primary-bg-color-light: $md-blue-60 !default; | ||
$md-button-primary-bg-color-dark: $md-blue-60 !default; | ||
$md-button-primary-hover-bg-color-light: $md-blue-70 !default; | ||
$md-button-primary-hover-bg-color-dark: $md-blue-70 !default; | ||
$md-button-primary-pressed-bg-color-light: $md-blue-80 !default; | ||
$md-button-primary-pressed-bg-color-dark: $md-blue-80 !default; | ||
$md-button-primary-text-color-light: $md-gray-05 !default; | ||
$md-button-primary-text-color-dark: $md-gray-05 !default; | ||
$md-button-primary-outline-color-light: $md-blue-70 !default; | ||
$md-button-primary-outline-color-dark: $md-blue-40 !default; | ||
$md-button-primary-outline-text-color-light: $md-blue-70 !default; | ||
$md-button-primary-outline-text-color-dark: $md-blue-40 !default; | ||
$md-button-secondary-bg-color-light: $md-gray-20 !default; | ||
$md-button-secondary-bg-color-dark: $md-gray-60 !default; | ||
$md-button-secondary-hover-bg-color-light: $md-gray-30 !default; | ||
$md-button-secondary-hover-bg-color-dark: $md-gray-70 !default; | ||
$md-button-secondary-pressed-bg-color-light: $md-gray-40 !default; | ||
$md-button-secondary-pressed-bg-color-dark: $md-gray-80 !default; | ||
$md-button-secondary-text-color-light: $md-gray-100 !default; | ||
$md-button-secondary-text-color-dark: $md-gray-05 !default; | ||
$md-button-secondary-outline-color-light: $md-gray-70 !default; | ||
$md-button-secondary-outline-color-dark: $md-gray-40 !default; | ||
$md-button-secondary-outline-text-color-light: $md-gray-70 !default; | ||
$md-button-secondary-outline-text-color-dark: $md-gray-40 !default; | ||
$md-button-join-bg-color-light: $md-green-60 !default; | ||
$md-button-join-bg-color-dark: $md-green-60 !default; | ||
$md-button-join-hover-bg-color-light: $md-green-70 !default; | ||
$md-button-join-hover-bg-color-dark: $md-green-70 !default; | ||
$md-button-join-pressed-bg-color-light: $md-green-80 !default; | ||
$md-button-join-pressed-bg-color-dark: $md-green-80 !default; | ||
$md-button-join-text-color-light: $md-gray-05 !default; | ||
$md-button-join-text-color-dark: $md-gray-05 !default; | ||
$md-button-join-outline-color-light: $md-green-70 !default; | ||
$md-button-join-outline-color-dark: $md-green-40 !default; | ||
$md-button-join-outline-text-color-light: $md-green-70 !default; | ||
$md-button-join-outline-text-color-dark: $md-green-40 !default; | ||
$md-button-cancel-bg-color-light: $md-red-60 !default; | ||
$md-button-cancel-bg-color-dark: $md-red-60 !default; | ||
$md-button-cancel-hover-bg-color-light: $md-red-70 !default; | ||
$md-button-cancel-hover-bg-color-dark: $md-red-70 !default; | ||
$md-button-cancel-pressed-bg-color-light: $md-red-80 !default; | ||
$md-button-cancel-pressed-bg-color-dark: $md-red-80 !default; | ||
$md-button-cancel-text-color-light: $md-gray-05 !default; | ||
$md-button-cancel-text-color-dark: $md-gray-05 !default; | ||
$md-button-cancel-outline-color-light: $md-red-70 !default; | ||
$md-button-cancel-outline-color-dark: $md-red-40 !default; | ||
$md-button-cancel-outline-text-color-light: $md-red-70 !default; | ||
$md-button-cancel-outline-text-color-dark: $md-red-40 !default; | ||
$md-button-ghost-bg-color-light: none !default; | ||
$md-button-ghost-bg-color-dark: none !default; | ||
$md-button-ghost-hover-bg-color-light: $md-gray-70 !default; | ||
$md-button-ghost-hover-bg-color-dark: $md-gray-70 !default; | ||
$md-button-ghost-pressed-bg-color-light: $md-gray-80 !default; | ||
$md-button-ghost-pressed-bg-color-dark: $md-gray-60 !default; | ||
$md-button-ghost-text-color-light: $md-gray-100 !default; | ||
$md-button-ghost-text-color-dark: $md-gray-05 !default; | ||
$md-button-focus-ring-color-light: $md-blue-60 !default; | ||
$md-button-focus-ring-color-dark: $md-blue-40 !default; | ||
$md-button-disabled-bg-color-light: $md-gray-20 !default; | ||
$md-button-disabled-bg-color-dark: $md-gray-90 !default; | ||
$md-button-disabled-text-color-light: $md-gray-40 !default; | ||
$md-button-disabled-text-color-dark: $md-gray-70 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-input-background-color-light: $md-white !default; | ||
$md-input-background-color-dark: $md-gray-100 !default; | ||
$md-input-background-hover-light: $md-gray-20 !default; | ||
$md-input-background-hover-dark: $md-gray-80 !default; | ||
$md-input-background-pressed-light: $md-gray-30 !default; | ||
$md-input-background-pressed-dark: $md-gray-70 !default; | ||
$md-input-background-active-light: $md-gray-20 !default; | ||
$md-input-background-active-dark: $md-gray-80 !default; | ||
$md-input-background-theme-color-light: $md-theme-60 !default; | ||
$md-input-background-theme-color-dark: $md-theme-40 !default; | ||
$md-input-background-theme-hover-light: $md-theme-70 !default; | ||
$md-input-background-theme-hover-dark: $md-theme-50 !default; | ||
$md-input-background-theme-pressed-light: $md-theme-80 !default; | ||
$md-input-background-theme-pressed-dark: $md-theme-60 !default; | ||
$md-input-background-theme-active-light: $md-theme-80 !default; | ||
$md-input-background-theme-active-dark: $md-theme-60 !default; | ||
$md-input-background-theme-disabled-light: $md-theme-05 !default; | ||
$md-input-background-theme-disabled-dark: $md-theme-90 !default; | ||
$md-input-background-error-light: $md-red-05 !default; | ||
$md-input-background-error-dark: $md-red-90 !default; | ||
$md-input-disabled-light: $md-gray-10 !default; | ||
$md-input-disabled-dark: $md-gray-90 !default; | ||
$md-input-focusRing-light: $md-theme-60 !default; | ||
$md-input-focusRing-dark: $md-theme-40 !default; | ||
$md-input-outline-color-light: $md-gray-30 !default; | ||
$md-input-outline-color-dark: $md-gray-70 !default; | ||
$md-input-outline-active-light: $md-gray-40 !default; | ||
$md-input-outline-active-dark: $md-gray-60 !default; | ||
$md-input-outline-error-light: $md-red-50 !default; | ||
$md-input-outline-error-dark: $md-red-50 !default; | ||
$md-input-text-primary-light: $md-gray-100 !default; | ||
$md-input-text-primary-dark: $md-gray-05 !default; | ||
$md-input-text-secondary-light: $md-gray-70 !default; | ||
$md-input-text-secondary-dark: $md-gray-70 !default; | ||
$md-input-text-disabled-light: $md-gray-40 !default; | ||
$md-input-text-disabled-dark: $md-gray-40 !default; | ||
$md-input-text-error-light: $md-red-70 !default; | ||
$md-input-text-error-dark: $md-red-40 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-presence-busy-light: $md-yellow-40 !default; | ||
$md-presence-busy-dark: $md-yellow-40 !default; | ||
$md-presence-doNotDisturb-light: $md-red-60 !default; | ||
$md-presence-doNotDisturb-dark: $md-red-60 !default; | ||
$md-presence-active-light: $md-green-50 !default; | ||
$md-presence-active-dark: $md-green-50 !default; | ||
$md-presence-away-light: $md-gray-30 !default; | ||
$md-presence-away-dark: $md-gray-30 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-separator-primary-light: $md-gray-30 !default; | ||
$md-separator-primary-dark: $md-gray-70 !default; | ||
$md-separator-secondary-light: $md-gray-40 !default; | ||
$md-separator-secondary-dark: $md-gray-60 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
//------------------------------------------------------ | ||
// Do not edit this file directly. These variables are | ||
// generated from the Momentum Design color tokens. | ||
// @momentum-ui/tokens/dist/semanticColor.json | ||
//------------------------------------------------------ | ||
|
||
$md-textColor-primary-light: $md-gray-100 !default; | ||
$md-textColor-primary-dark: $md-gray-05 !default; | ||
$md-textColor-secondary-light: $md-gray-70 !default; | ||
$md-textColor-secondary-dark: $md-gray-40 !default; | ||
$md-textColor-disabled-light: $md-gray-40 !default; | ||
$md-textColor-disabled-dark: $md-gray-70 !default; | ||
$md-textColor-highlight-light: $md-gray-20 !default; | ||
$md-textColor-highlight-dark: $md-gray-80 !default; | ||
$md-textColor-hyperlink-color-light: $md-theme-70 !default; | ||
$md-textColor-hyperlink-color-dark: $md-theme-40 !default; | ||
$md-textColor-hyperlink-hover-light: $md-theme-90 !default; | ||
$md-textColor-hyperlink-hover-dark: $md-theme-20 !default; | ||
$md-textColor-hyperlink-focus-light: $md-theme-70 !default; | ||
$md-textColor-hyperlink-focus-dark: $md-theme-40 !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
const path = require('path'); | ||
const fs = require('fs-extra'); | ||
|
||
const generateComment = (dataFile) => { | ||
return [ | ||
'//------------------------------------------------------', | ||
'// Do not edit this file directly. These variables are', | ||
'// generated from the Momentum Design color tokens.', | ||
`// ${dataFile}`, | ||
'//------------------------------------------------------', | ||
].join('\n'); | ||
}; | ||
|
||
const delve = (value, prefix) => { | ||
if (typeof value !== 'object') { | ||
return `${prefix}: ${value} !default;\n`; | ||
} | ||
|
||
return Object.keys(value).map( | ||
(key) => delve(value[key], `${prefix}-${key}`) | ||
).join(''); | ||
}; | ||
|
||
async function generateFileFromThemeToken(dest, fileName, data, dataFile) { | ||
const scope = { ...data }; | ||
const prefix = `$${data.prefix}-${data.component}`; | ||
const outputFile = path.join(dest, fileName); | ||
|
||
delete scope.component; | ||
delete scope.prefix; | ||
|
||
const content = [ | ||
generateComment(dataFile), | ||
'\n\n', | ||
delve(scope, prefix) | ||
].join(''); | ||
|
||
await fs.outputFile(outputFile, content); | ||
|
||
console.warn(`${outputFile} written!`); | ||
} | ||
|
||
module.exports = generateFileFromThemeToken; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,76 @@ | ||
import "@/components/card/Card"; | ||
import { html } from "lit-element"; | ||
import "@/components/badge/Badge"; | ||
import { cardMenuItems } from "@/[sandbox]/sandbox.mock"; | ||
import { customElement, html, LitElement, property } from "lit-element"; | ||
|
||
@customElement("card-template-sandbox") | ||
export class CardTemplateSandbox extends LitElement { | ||
@property({ type: String }) value = ""; | ||
|
||
connectedCallback() { | ||
super.connectedCallback(); | ||
this.addEventListener("card-click", this.handleClickCard as EventListener); | ||
this.addEventListener("card-keydown", this.handleKeydownCard as EventListener); | ||
this.addEventListener("card-menu-click", this.handleClickMenu as EventListener); | ||
} | ||
|
||
private handleClickCard(e: MouseEvent) { | ||
const { id } = e.detail as any; | ||
|
||
this.value = "Card " + id + ": is clickable"; | ||
} | ||
|
||
private handleKeydownCard(e: KeyboardEvent) { | ||
const { id } = e.detail as any; | ||
|
||
this.value = "Card " + id + ": is key event"; | ||
} | ||
|
||
private handleClickMenu(e: MouseEvent) { | ||
const { id, type } = e.detail as any; | ||
|
||
this.value = "Card " + id + ": in " + type + " mode"; | ||
} | ||
|
||
private handleKeydownMenu(e: KeyboardEvent) { | ||
const { id, type } = e.detail as any; | ||
|
||
this.value = "Card " + id + ": in " + type + " mode by keyboard event"; | ||
} | ||
|
||
render() { | ||
return html` | ||
<h4>${this.value}</h4> | ||
<md-card | ||
.menuOptions=${cardMenuItems} | ||
id="123456789" | ||
title="Team A Report - Q1" | ||
subtitle="Updated 2 hours ago" | ||
@card-menu-keydown="${(e: KeyboardEvent) => this.handleKeydownMenu(e)}" | ||
info="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." | ||
> | ||
<div slot="content"> | ||
<img | ||
style="width: 100%;" | ||
src="https://media.istockphoto.com/vectors/dashboard-ui-modern-presentation-with-data-graphs-and-hud-diagrams-vector-id1159848977" | ||
alt="" | ||
/> | ||
</div> | ||
<md-badge slot="footer" color="violet" small>Active</md-badge> | ||
<md-badge slot="footer" color="mint" small>Stock Report</md-badge> | ||
<md-badge slot="footer" color="gold" small>Team Report</md-badge> | ||
<md-badge slot="footer" color="lime" small>Team A</md-badge> | ||
<md-badge slot="footer" color="blue" small>TA</md-badge> | ||
<md-badge slot="footer" color="orange" small>Team B</md-badge> | ||
<md-badge slot="footer" color="blue" small>Some long long label</md-badge> | ||
<md-badge slot="footer" color="pink" small>Confidential</md-badge> | ||
</md-card> | ||
`; | ||
} | ||
} | ||
|
||
export const cardTemplate = html` | ||
<h3>Default Card</h3> | ||
<md-card> | ||
<div slot="content"> | ||
<img src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png" alt="" /> | ||
</div> | ||
</md-card> | ||
<card-template-sandbox></card-template-sandbox> | ||
`; |
Oops, something went wrong.