Oscar Hinton
4 years ago
committed by
GitHub
10 changed files with 650 additions and 39 deletions
@ -0,0 +1,41 @@
@@ -0,0 +1,41 @@
|
||||
--- |
||||
name: Chromatic |
||||
|
||||
on: push |
||||
|
||||
jobs: |
||||
chromatic: |
||||
name: Chromatic |
||||
runs-on: ubuntu-20.04 |
||||
|
||||
steps: |
||||
- name: Set up Node |
||||
uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5 |
||||
with: |
||||
node-version: "16" |
||||
|
||||
- name: Checkout repo |
||||
uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4 |
||||
with: |
||||
fetch-depth: 0 |
||||
|
||||
- name: Cache npm |
||||
id: npm-cache |
||||
uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353 # v2.1.6 |
||||
with: |
||||
path: "~/.npm" |
||||
key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }} |
||||
|
||||
- name: Install Node dependencies |
||||
run: npm ci |
||||
working-directory: ./components |
||||
|
||||
- name: Publish to Chromatic |
||||
uses: chromaui/action@c72f0b48c8887c0ef0abe18ad865a6c1e01e73c6 |
||||
with: |
||||
token: ${{ secrets.GITHUB_TOKEN }} |
||||
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} |
||||
workingDir: ./components |
||||
exitOnceUploaded: true |
||||
onlyChanged: true |
||||
externals: "[\"components/**/*.scss\", \"components/tailwind.config*.js\"]" |
||||
@ -0,0 +1,85 @@
@@ -0,0 +1,85 @@
|
||||
import { Meta } from "@storybook/addon-docs"; |
||||
|
||||
<Meta title="Common/Colors" /> |
||||
|
||||
export const Row = (name) => ( |
||||
<tr class="tw-h-16"> |
||||
<td class="!tw-border-none">{name}</td> |
||||
<td class={"tw-bg-" + name + " !tw-border-secondary-300"}></td> |
||||
</tr> |
||||
); |
||||
|
||||
export const Table = (args) => ( |
||||
<table class={"tw-table-auto border !tw-text-main " + args.class}> |
||||
<thead> |
||||
<tr> |
||||
<th>General usage</th> |
||||
<th class="tw-w-20"></th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{Row("background")} |
||||
{Row("background-alt")} |
||||
{Row("background-alt2")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("primary-300")} |
||||
{Row("primary-500")} |
||||
{Row("primary-700")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("secondary-100")} |
||||
{Row("secondary-300")} |
||||
{Row("secondary-500")} |
||||
{Row("secondary-700")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("success-500")} |
||||
{Row("success-700")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("danger-500")} |
||||
{Row("danger-700")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("warning-500")} |
||||
{Row("warning-700")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("info-500")} |
||||
{Row("info-700")} |
||||
</tbody> |
||||
<tbody> |
||||
{Row("text-main")} |
||||
{Row("text-muted")} |
||||
{Row("text-contrast")} |
||||
</tbody> |
||||
</table> |
||||
); |
||||
|
||||
<style>{` |
||||
table { |
||||
border-spacing: 0.5rem; |
||||
border-collapse: separate !important; |
||||
} |
||||
|
||||
tr { |
||||
background: none !important; |
||||
border: none !important; |
||||
} |
||||
|
||||
td, th { |
||||
color: inherit !important; |
||||
} |
||||
|
||||
th { |
||||
border: none !important; |
||||
} |
||||
`}</style> |
||||
|
||||
# Colors |
||||
|
||||
<div class="tw-flex tw-space-x-4"> |
||||
<Table /> |
||||
<Table class="theme_dark tw-bg-background" /> |
||||
</div> |
||||
@ -0,0 +1,357 @@
@@ -0,0 +1,357 @@
|
||||
$dark-icon-themes: "theme_dark"; |
||||
|
||||
$primary: #175ddc; |
||||
$primary-accent: #1252a3; |
||||
$secondary: #ced4da; |
||||
$secondary-alt: #1a3b66; |
||||
$success: #00a65a; |
||||
$info: #555555; |
||||
$warning: #bf7e16; |
||||
$danger: #dd4b39; |
||||
$white: #ffffff; |
||||
|
||||
// Bootstrap Variable Overrides |
||||
|
||||
$theme-colors: ( |
||||
"primary-accent": $primary-accent, |
||||
"secondary-alt": $secondary-alt, |
||||
); |
||||
|
||||
$body-bg: $white; |
||||
$body-color: #333333; |
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, |
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||
|
||||
$h1-font-size: 1.7rem; |
||||
$h2-font-size: 1.3rem; |
||||
$h3-font-size: 1rem; |
||||
$h4-font-size: 1rem; |
||||
$h5-font-size: 1rem; |
||||
$h6-font-size: 1rem; |
||||
|
||||
$small-font-size: 90%; |
||||
$font-size-lg: 1.15rem; |
||||
$code-font-size: 100%; |
||||
|
||||
$navbar-padding-y: 0.75rem; |
||||
$grid-gutter-width: 20px; |
||||
$card-spacer-y: 0.6rem; |
||||
|
||||
$list-group-item-padding-y: 0.6rem; |
||||
$list-group-active-color: $body-color; |
||||
$list-group-active-bg: $white; |
||||
$list-group-active-border-color: rgba(#000000, 0.125); |
||||
|
||||
$dropdown-link-color: $body-color; |
||||
$dropdown-link-hover-bg: rgba(#000000, 0.06); |
||||
$dropdown-link-active-color: $dropdown-link-color; |
||||
$dropdown-link-active-bg: rgba(#000000, 0.1); |
||||
$dropdown-item-padding-x: 1rem; |
||||
|
||||
$navbar-brand-font-size: 35px; |
||||
$navbar-brand-height: 35px; |
||||
$navbar-brand-padding-y: 0; |
||||
$navbar-dark-color: rgba($white, 0.7); |
||||
$navbar-dark-hover-color: rgba($white, 0.9); |
||||
$navbar-nav-link-padding-x: 0.8rem; |
||||
|
||||
$input-bg: #fbfbfb; |
||||
$input-focus-bg: $white; |
||||
$input-disabled-bg: #e0e0e0; |
||||
$input-placeholder-color: #b4b4b4; |
||||
|
||||
$table-accent-bg: rgba(#000000, 0.02); |
||||
$table-hover-bg: rgba(#000000, 0.03); |
||||
|
||||
$modal-backdrop-opacity: 0.3; |
||||
$btn-font-weight: 600; |
||||
$lead-font-weight: normal; |
||||
|
||||
$grid-breakpoints: ( |
||||
xs: 0, |
||||
sm: 1px, |
||||
md: 2px, |
||||
lg: 3px, |
||||
xl: 4px, |
||||
); |
||||
|
||||
$border-color: $secondary; |
||||
|
||||
// MFA Types for logo styling with no dark theme alternative |
||||
|
||||
$mfaTypes: 0, 2, 3, 4, 6; |
||||
|
||||
// Theme Variables |
||||
// Light |
||||
|
||||
$lightDangerHover: #c43421; |
||||
$lightInputColor: #465057; |
||||
$lightInputPlaceholderColor: #b6b8b8; |
||||
|
||||
// Dark |
||||
|
||||
$darkPrimary: #6a99f0; |
||||
$darkPrimary-alt: #b4ccf9; |
||||
$darkDanger: #ff8d85; |
||||
$darkDangerHover: #ffbfbb; |
||||
$darkSuccess: #52e07c; |
||||
$darkWarning: #ffeb66; |
||||
$darkInfo: #a4b0c6; |
||||
$darkLinks: #6a99f0; |
||||
$darkGrey1: #bac0ce; |
||||
$darkGrey2: #8d94a5; |
||||
$darkBlue1: #4c525f; |
||||
$darkBlue2: #3c424e; |
||||
$darkDarkBlue1: #2f343d; |
||||
$darkDarkBlue2: #1f242e; |
||||
$darkInputColor: $white; |
||||
$darkInputPlaceholderColor: $darkGrey1; |
||||
|
||||
$themes: ( |
||||
light: ( |
||||
primary: $primary, |
||||
primaryAlt: $primary-accent, |
||||
danger: $danger, |
||||
info: #343a40, |
||||
success: $success, |
||||
warning: $warning, |
||||
backgroundColor: $white, |
||||
badgeDangerBackground: $danger, |
||||
badgeDangerText: $white, |
||||
badgeInfoBackground: #555555, |
||||
badgeInfoText: $white, |
||||
badgePrimaryBackground: $primary, |
||||
badgePrimaryBackgroundHover: #134eb9, |
||||
badgePrimaryText: $white, |
||||
badgeSecondaryBackground: #ced4da, |
||||
badgeSecondaryText: #212529, |
||||
bgLightColor: #f8f9fa, |
||||
bgPrimaryColor: $primary, |
||||
borderColor: $border-color, |
||||
borderPrimaryColor: $primary, |
||||
browserInputIconsFilter: invert(0), |
||||
btnDanger: $danger, |
||||
btnDangerHover: $lightDangerHover, |
||||
btnDangerText: $white, |
||||
btnLinkText: $primary, |
||||
btnLinkTextHover: #104097, |
||||
btnOutlineDangerBackground: $input-bg, |
||||
btnOutlineDangerBackgroundHover: $danger, |
||||
btnOutlineDangerBorder: #ced4da, |
||||
btnOutlineDangerBorderHover: $danger, |
||||
btnOutlineDangerText: $danger, |
||||
btnOutlineDangerTextHover: $white, |
||||
btnOutlinePrimaryBackground: $input-bg, |
||||
btnOutlinePrimaryBackgroundHover: $primary, |
||||
btnOutlinePrimaryBorder: #ced4da, |
||||
btnOutlinePrimaryBorderHover: $primary, |
||||
btnOutlinePrimaryText: $primary, |
||||
btnOutlinePrimaryTextHover: $white, |
||||
btnOutlineSecondaryBackground: $input-bg, |
||||
btnOutlineSecondaryBackgroundHover: #ced4da, |
||||
btnOutlineSecondaryBorder: #ced4da, |
||||
btnOutlineSecondaryBorderHover: #ced4da, |
||||
btnOutlineSecondaryText: #6c757d, |
||||
btnOutlineSecondaryTextHover: #333333, |
||||
btnPrimary: $primary, |
||||
btnPrimaryBorderHover: #1249ae, |
||||
btnPrimaryHover: #134eb9, |
||||
btnPrimaryText: $white, |
||||
btnSecondary: $secondary, |
||||
btnSecondaryBorder: $secondary, |
||||
btnSecondaryBorderHover: #b1bbc4, |
||||
btnSecondaryHover: #b8c1ca, |
||||
btnSecondaryText: #212529, |
||||
btnSecondaryTextHover: #212529, |
||||
calloutBackground: #fafafa, |
||||
calloutColor: #212529, |
||||
cdkDraggingBackground: $white, |
||||
codeColor: #e83e8c, |
||||
dropdownBackground: $white, |
||||
dropdownHover: rgba(0, 0, 0, 0.06), |
||||
dropdownTextColor: $body-color, |
||||
dropdownTextMuted: #6c757d, |
||||
focus: rgb(23 93 220 / 25%), |
||||
footerBackgroundColor: #fbfbfb, |
||||
foregroundColor: $white, |
||||
headerColor: rgba(0, 0, 0, 0.03), |
||||
iconColor: #777777, |
||||
iconHover: $body-color, |
||||
imgFilter: invert(0) grayscale(0), |
||||
inputBackgroundColor: $input-bg, |
||||
inputBorderColor: $border-color, |
||||
inputDisabledBackground: #e0e0e0, |
||||
inputDisabledColor: #6c757d, |
||||
inputPlaceholderColor: $lightInputPlaceholderColor, |
||||
inputTextColor: $lightInputColor, |
||||
layoutFrontendColor: #ecf0f5, |
||||
learnMoreHover: #104097, |
||||
linkColor: $primary, |
||||
linkColorHover: #104097, |
||||
linkWeight: 400, |
||||
listItemActive: $body-color, |
||||
listItemBorder: rgba(0, 0, 0, 0.125), |
||||
loadingSvg: url("../images/loading.svg"), |
||||
logoSuffix: "dark", |
||||
mfaLogoSuffix: ".png", |
||||
navActiveBackground: $white, |
||||
navActiveWeight: 600, |
||||
navBackground: $primary, |
||||
navBackgroundAlt: $secondary-alt, |
||||
navOrgBackgroundColor: #fbfbfb, |
||||
navWeight: 600, |
||||
pwLetter: $body-color, |
||||
pwNumber: #007fde, |
||||
pwSpecial: #c40800, |
||||
pwStrengthBackground: #e9ecef, |
||||
separator: $secondary, |
||||
separatorHr: rgb(0, 0, 0, 0.1), |
||||
tableColorHover: #333333, |
||||
tableLinkColor: $primary, |
||||
tableLinkColorHover: #104097, |
||||
tableRowHover: rgba(0, 0, 0, 0.03), |
||||
tableSeparator: #dee2e6, |
||||
textColor: $body-color, |
||||
textDangerColor: $white, |
||||
textInfoColor: $white, |
||||
textHeadingColor: #333333, |
||||
textMuted: #6c757d, |
||||
textSuccessColor: $white, |
||||
textWarningColor: $white, |
||||
), |
||||
dark: ( |
||||
primary: $darkPrimary, |
||||
primaryAlt: $darkPrimary-alt, |
||||
danger: $darkDanger, |
||||
info: $darkInfo, |
||||
success: $darkSuccess, |
||||
warning: $darkWarning, |
||||
backgroundColor: $darkDarkBlue2, |
||||
badgeDangerBackground: $darkDanger, |
||||
badgeDangerText: $darkDarkBlue2, |
||||
badgeInfoBackground: $darkInfo, |
||||
badgeInfoText: $darkDarkBlue2, |
||||
badgePrimaryBackground: $darkLinks, |
||||
badgePrimaryBackgroundHover: $darkPrimary-alt, |
||||
badgePrimaryText: $darkDarkBlue2, |
||||
badgeSecondaryBackground: $darkGrey2, |
||||
badgeSecondaryText: $darkDarkBlue2, |
||||
bgLightColor: $darkDarkBlue2, |
||||
bgPrimaryColor: $darkPrimary, |
||||
borderColor: $darkBlue1, |
||||
borderPrimaryColor: $darkPrimary, |
||||
browserInputIconsFilter: invert(1), |
||||
btnDanger: $darkDanger, |
||||
btnDangerHover: $darkDangerHover, |
||||
btnDangerText: $darkDarkBlue2, |
||||
btnLinkText: $white, |
||||
btnLinkTextHover: $darkGrey1, |
||||
btnOutlineDangerBackground: $darkDanger, |
||||
btnOutlineDangerBackgroundHover: $darkDangerHover, |
||||
btnOutlineDangerBorder: $darkDanger, |
||||
btnOutlineDangerBorderHover: $darkDangerHover, |
||||
btnOutlineDangerText: $darkDarkBlue2, |
||||
btnOutlineDangerTextHover: $darkDarkBlue2, |
||||
btnOutlinePrimaryBackground: $darkPrimary, |
||||
btnOutlinePrimaryBackgroundHover: $darkPrimary-alt, |
||||
btnOutlinePrimaryBorder: $darkPrimary, |
||||
btnOutlinePrimaryBorderHover: $darkPrimary-alt, |
||||
btnOutlinePrimaryText: $darkDarkBlue2, |
||||
btnOutlinePrimaryTextHover: $darkDarkBlue2, |
||||
btnOutlineSecondaryBackground: transparent, |
||||
btnOutlineSecondaryBackgroundHover: transparent, |
||||
btnOutlineSecondaryBorder: $darkGrey1, |
||||
btnOutlineSecondaryBorderHover: $darkGrey2, |
||||
btnOutlineSecondaryText: $white, |
||||
btnOutlineSecondaryTextHover: $darkGrey2, |
||||
btnPrimary: $darkLinks, |
||||
btnPrimaryBorderHover: $darkPrimary-alt, |
||||
btnPrimaryHover: $darkPrimary-alt, |
||||
btnPrimaryText: $darkDarkBlue2, |
||||
btnSecondary: transparent, |
||||
btnSecondaryBorder: $darkGrey1, |
||||
btnSecondaryBorderHover: $darkGrey2, |
||||
btnSecondaryHover: transparent, |
||||
btnSecondaryText: $white, |
||||
btnSecondaryTextHover: $darkGrey2, |
||||
calloutBackground: $darkBlue2, |
||||
calloutColor: $white, |
||||
cdkDraggingBackground: $darkDarkBlue1, |
||||
codeColor: #e83e8c, |
||||
dropdownBackground: $darkDarkBlue1, |
||||
dropdownHover: rgba(255, 255, 255, 0.03), |
||||
dropdownTextColor: $white, |
||||
dropdownTextMuted: #bec6cf, |
||||
focus: rgb(106 153 240 / 25%), |
||||
footerBackgroundColor: $darkBlue1, |
||||
foregroundColor: $darkDarkBlue1, |
||||
headerColor: $darkBlue1, |
||||
iconColor: #777777, |
||||
iconHover: $darkGrey2, |
||||
imgFilter: invert(1) grayscale(1), |
||||
inputBackgroundColor: transparent, |
||||
inputBorderColor: $darkGrey1, |
||||
inputDisabledBackground: $darkBlue2, |
||||
inputDisabledColor: $darkGrey1, |
||||
inputPlaceholderColor: $darkInputPlaceholderColor, |
||||
inputTextColor: $darkInputColor, |
||||
layoutFrontendColor: $darkDarkBlue2, |
||||
learnMoreHover: $darkPrimary-alt, |
||||
linkColor: $darkLinks, |
||||
linkColorHover: $darkLinks, |
||||
linkWeight: 600, |
||||
listItemActive: $darkPrimary, |
||||
listItemBorder: $darkBlue1, |
||||
loadingSvg: url("../images/loading-white.svg"), |
||||
logoSuffix: "white", |
||||
mfaLogoSuffix: "-w.png", |
||||
navActiveBackground: $darkDarkBlue2, |
||||
navActiveWeight: 600, |
||||
navBackground: $darkDarkBlue1, |
||||
navBackgroundAlt: $darkDarkBlue1, |
||||
navOrgBackgroundColor: #161c26, |
||||
navWeight: 400, |
||||
pwLetter: $white, |
||||
pwNumber: #52bdfb, |
||||
pwSpecial: #ff7c70, |
||||
pwStrengthBackground: $darkBlue2, |
||||
separator: $darkBlue1, |
||||
separatorHr: $darkBlue1, |
||||
tableColorHover: $darkGrey1, |
||||
tableLinkColor: $white, |
||||
tableLinkColorHover: $white, |
||||
tableRowHover: rgba(255, 255, 255, 0.03), |
||||
tableSeparator: $darkBlue1, |
||||
textColor: $darkGrey1, |
||||
textDangerColor: $darkDarkBlue2, |
||||
textHeadingColor: $white, |
||||
textInfoColor: $darkDarkBlue2, |
||||
textMuted: $darkGrey1, |
||||
textSuccessColor: $darkDarkBlue2, |
||||
textWarningColor: $darkDarkBlue2, |
||||
), |
||||
); |
||||
|
||||
@mixin themify($themes: $themes) { |
||||
@each $theme, $map in $themes { |
||||
html.theme_#{$theme} & { |
||||
$theme-map: () !global; |
||||
@each $key, $submap in $map { |
||||
$value: map-get(map-get($themes, $theme), "#{$key}"); |
||||
$theme-map: map-merge( |
||||
$theme-map, |
||||
( |
||||
$key: $value, |
||||
) |
||||
) !global; |
||||
} |
||||
@content; |
||||
$theme-map: null !global; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@function themed($key) { |
||||
@return map-get($theme-map, $key); |
||||
} ; |
||||
@ -1,6 +1,11 @@
@@ -1,6 +1,11 @@
|
||||
/* eslint-disable */ |
||||
const config = require("./tailwind.config.base"); |
||||
|
||||
config.content = ["./src/**/*.{html,ts}", "./.storybook/preview.js"]; |
||||
config.content = ["./src/**/*.{html,ts,mdx}", "./.storybook/preview.js"]; |
||||
config.safelist = [ |
||||
{ |
||||
pattern: /tw-bg-(.*)/, |
||||
}, |
||||
]; |
||||
|
||||
module.exports = config; |
||||
|
||||
Loading…
Reference in new issue