Skip to content

Commit

Permalink
Merge pull request #586 from lwnoble/main
Browse files Browse the repository at this point in the history 
Video and color updates
  • Loading branch information
@lwnoble
lwnoble authored Sep 19, 2023
2 parents c77ee96 + 504f423 commit 580899c
Show file tree
Hide file tree
Showing 17 changed files with 174 additions and 124 deletions.
24 changes: 24 additions & 0 deletions code/src/data/themes
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,27 @@
{"k":"0000000080","o":"0000001586","v":"001"}
{"_id":24,"_uid":24,"_dt":1695064029846,"_s":"66b62334ce57e5855f17648b765d65ed"}
{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1695064029800,"lastUpdateInMs":1695064029800},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Demo","_id":{"$wrap":"$oid","v":24}}
{"k":"0000000051","o":"0000000000","v":"001"}
{"_id":24,"_uid":24,"_dt":1695124852486,"_a":"del"}

{"k":"0000000080","o":"0000001593","v":"001"}
{"_id":25,"_uid":25,"_dt":1695125015720,"_s":"a3f74079846bfe559767b44885cc7aca"}
{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1695125015702,"lastUpdateInMs":1695125015702},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Demo Sample","_id":{"$wrap":"$oid","v":25}}
{"k":"0000000080","o":"0000001586","v":"001"}
{"_id":26,"_uid":26,"_dt":1695126162220,"_s":"b5f0b7fdcfe2c94996955a1b24b994e3"}
{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1695126162202,"lastUpdateInMs":1695126162202},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Demo","_id":{"$wrap":"$oid","v":26}}
{"k":"0000000051","o":"0000000000","v":"001"}
{"_id":25,"_uid":26,"_dt":1695126295650,"_a":"del"}

{"k":"0000000051","o":"0000000000","v":"001"}
{"_id":26,"_uid":26,"_dt":1695126298136,"_a":"del"}

{"k":"0000000080","o":"0000001593","v":"001"}
{"_id":27,"_uid":27,"_dt":1695126334622,"_s":"f05f4814f378133e1f57c884f0911094"}
{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1695126334612,"lastUpdateInMs":1695126334612},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Demo Sample","_id":{"$wrap":"$oid","v":27}}
{"k":"0000000051","o":"0000000000","v":"001"}
{"_id":27,"_uid":27,"_dt":1695129224084,"_a":"del"}

{"k":"0000000080","o":"0000001593","v":"001"}
{"_id":28,"_uid":28,"_dt":1695129260076,"_s":"fe6116cf6ed611d6de1f9befc07fac76"}
{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1695129260063,"lastUpdateInMs":1695129260063},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Demo Sample","_id":{"$wrap":"$oid","v":28}}
Binary file modified code/src/ui/public/buildtheme.mp4
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion code/src/ui/src/components/DisplayColorTheme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export const DisplayColorTheme: React.FC<Props> = ({ atom }) => {
</div>
<div className="input-col">
<div className="caption">White</div>
<div className="Hex white">Aa</div>
<div className="Hex white whiteHex">Aa</div>
</div>
</div>
</div>
Expand Down
44 changes: 16 additions & 28 deletions code/src/ui/src/mui-a11y-tb/themes/TB.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
--hover: 50%;
/* Radius */
--radius-0: 0px;
--radius-1: 8px;
--radius-2: calc(var(--radius-1) * 2);
--radius-3: calc(var(--radius-1) * 3);
--radius-4: calc(var(--radius-1) * 4);
Expand All @@ -25,7 +24,6 @@
--radius-half: calc(var(--radius-1) / 2);
/* Spacing */
--spacing-0: 0px;
--spacing-1: 8px;
--spacing-2: calc(var(--spacing-1) * 2);
--spacing-3: calc(var(--spacing-1) * 3);
--spacing-4: calc(var(--spacing-1) * 4);
Expand All @@ -41,7 +39,6 @@
/* Borders */
--border-opacity: 15%;
--border-0: 0px;
--border-1: 1px;
--border-2: calc(var(--border-1) * 2);
--border-3: calc(var(--border-1) * 3);
--border-4: calc(var(--border-1) * 4);
Expand Down Expand Up @@ -963,11 +960,10 @@
--dropdown-hover-bg: linear-gradient(90deg, var(--button-half) var(--dropdown-focus-theme), var(--transparent) var(--dropdown-focus-theme)) !important;
/* Input */
--input: rgba(254,252,254,0.55);
--input-disabled: rgba(178,176,179,0.535);
--on-input: #121212;
--on-input-disabled: #121212;
--primary-input: var(--input);
--primary-on-input: var(--on-input);
/* Primary background */
--primary-body-bg: var(--body-bg);
--primary-background: var(--background);
--primary-alt-background: var(--alt-background);
--primary-on-background: var(--on-background);
Expand All @@ -983,13 +979,9 @@
--primary-hotlink: var(--hotlink);
--primary-hotlink-decoration: var(--hotlink-decoration);
--primary-hotlink-hover-decoration: var(--hotlink-hover-decoration);
/* Border */
--primary-input-border: color-mix(in lch, var(--background), var(--on-background) 12%);
/* Inputs */
--primary-input: color-mix(in lch, var(--background), var(--on-background) 15%);
--primary-input-border: color-mix(in lch, var(--background), var(--on-background) 15%);

/* Light Mode (hacck until we update the sdk ) */
--lm-body-bg: var(--white);
--lm-white: var(--white);
--lm-on-white: var(--on-white);
--lm-on-black: var(--on-black);
Expand Down Expand Up @@ -1088,8 +1080,6 @@
/* Inputs */
--lm-input: var(--input);
--lm-on-input: var(--on-input);
--lm-input-disabled: var(--input-disabled);
--lm-input-hover: var(--input-hover);
/* Hotlinks */
--lm-hotlink: var(--hotlink);
--lm-hotlink-visited: var(--hotlink-visited);
Expand Down Expand Up @@ -1268,7 +1258,7 @@
--lm-accent-900: var(--accent-900);
--lm-on-accent-900: var(--on-accent-900);
/* Dark mode */
--dm-white: rgba(255, 255, 255, 0.6);
--dm-white: rgba(255,255,255,0.6);
--dm-white-bg: var(--dm-midnight-600);
--dm-on-white: #121212;
--dm-on-white-bg: var(--dm-on-midnight-600);
Expand Down Expand Up @@ -1367,8 +1357,6 @@
/* Inputs */
--dm-input: color-mix(in lch, var(--dm-background), var(--white) 4%);
--dm-on-input: rgba(255,255,255,0.6);
--dm-input-disabled: rgba(13,13,13,0.515);
--dm-input-hover: rgba(255,255,255,.12);
/* Hotlinks */
--dm-hotlink: #3384F2;
--dm-hotlink-decoration: underline;
Expand Down Expand Up @@ -1533,7 +1521,7 @@

[data-mode="light"] {
/* Core Colors */
--body-bg: var(--white);
--body-bg: var(--lm-body-bg);
--border-opacity: 15%;
--overlay-opacity: .35;
--alt-adjust: var(--white);
Expand Down Expand Up @@ -1811,7 +1799,6 @@
/* border opacity */
--border-opacity: 15%;
/* Primary background */
--primary-body-bg: var(--body-bg);
--primary-background: var(--background);
--primary-alt-background: var(--alt-background);
--primary-on-background: var(--on-background);
Expand All @@ -1828,7 +1815,8 @@
--primary-hotlink-decoration: var(--hotlink-decoration);
--primary-hotlink-hover-decoration: var(--hotlink-hover-decoration);
/* Inputs */
--primary-input: color-mix(in lch, var(--background), var(--on-background) 15%)
--primary-input: var(--lm-input);
--primary-on-input: var(--lm-on-input);
--primary-input-border: color-mix(in lch, var(--background), var(--on-background) 15%);
/* Text Decoration */
--primary-text-gradient-a: var(--text-gradient-a);
Expand Down Expand Up @@ -1997,7 +1985,7 @@

}
[data-mode="dark"] {
--body-bg: var(--black);
--body-bg: var(--dm-body-bg);
--border-opacity: 40%;
--overlay-opacity: .70;
--alt-adjust: var(--black);
Expand Down Expand Up @@ -2097,9 +2085,9 @@
/* Border */
--border: color-mix(in lch, var(--background), var(--on-background) 20%);
/* Inputs */
--input: color-mix(in lch, var(--background), var(--on-background) 5%);
--input-border: color-mix(in lch, var(--background), var(--on-background) 15%);
--on-input: var(--on-background);
--input: var(--dm-input);
--input-border: color-mix(in lch, var(--dm-background), var(--dm-on-background) 15%);
--on-input: var(--dm-on-background);
/* Hotlinks */
--hotlink: var(--dm-hotlink);
--hotlink-decoration: var(--dm-hotlink-decoration);
Expand Down Expand Up @@ -2269,7 +2257,6 @@
/* border opacity */
--border-opacity: 40%;
/* Primary background */
--primary-body-bg: var(--body-bg);
--primary-background: var(--dm-background);
--primary-alt-background: var(--dm-alt-background);
--primary-on-background: var(--dm-on-background);
Expand All @@ -2286,7 +2273,8 @@
--primary-hotlink-decoration: var(--dm-hotlink-decoration);
--primary-hotlink-hover-decoration: var(--dm-hotlink-hover-decoration);
/* Inputs */
--primary-input: color-mix(in lch, var(--dm-background), var(--dm-on-background) 5%);
--primary-input: var(--dm-input);
--primary-on-input: var(--dm-on-input);
--primary-input-border: color-mix(in lch, var(--dm-background), var(--dm-on-background) 15%);
/* Inputs */
--primary-text-gradient-a: var(--dm-text-gradient-a);
Expand Down Expand Up @@ -2591,7 +2579,7 @@
/* Border */
--border: color-mix(in lch, var(--background), var(--on-background) var(--border-opacity));
/* Inputs */
--input: color-mix(in lch, var(--background), var(--on-background) 5%);
--input: var(--primary-input);
--input-border: color-mix(in lch, var(--background), var(--on-background) 20%);
/* Text Decorations */
--text-gradient-a: var(--primary-text-gradient-a);
Expand Down Expand Up @@ -2624,7 +2612,7 @@
/* Border */
--border: color-mix(in lch, var(--background), var(--on-background) var(--border-opacity));
/* Inputs */
--input: color-mix(in lch, var(primary-background), var(--on-background) 5%);
--input: var(--primary-input);
--input-border: color-mix(in lch, var(--background), var(--on-background) 20%);
/* Text Decorations */
--text-gradient-a: var(--primary-text-gradient-a);
Expand Down Expand Up @@ -2717,7 +2705,7 @@
/* Border */
--border: color-mix(in lch, var(--background-tertiary), var(--on-background-tertiary) var(--border-opacity));
/* Inputs */
--input: color-mix(in lch, var(--background-tertiary), var(--on-background) 5%);
--input: color-mix(in lch, var(--background-tertiary), var(--white) 5%);
--input-border: color-mix(in lch, var(--background-tertiary), var(--on-background) 20%);
/* Text Decorations */
--text-gradient-a: var(--on-background-tertiary);
Expand Down
45 changes: 15 additions & 30 deletions code/src/ui/src/mui-a11y-tb/themes/Theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ section:has( .quote) {
color: var(--white);
}
.white {
white: var(--white);
background: var(--white) !important;
color: var(--on-white);
}

Expand Down Expand Up @@ -856,7 +856,7 @@ button.MuiButtonGroup-grouped.MuiButtonGroup-groupedVertical:not(:first-of-type)
bottom: 0 !important;
min-height: calc(var(--button-height) * var(--spacing-1) + var(--border-1) * var(--button-border) * 2px + 4px);
}
button:not(.MuiTab-root):hover::after {
button:not(.MuiTab-root):hover:not(:active)::after {
opacity: .5;
top: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px));
left: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px));
Expand Down Expand Up @@ -1205,7 +1205,8 @@ button.MuiPaginationItem-root:hover {
position: relative;
min-height: var(--min-target);
border: var(--border);
box-shadow: var(--toast-shadow)
box-shadow: var(--toast-shadow);
background: var(--background);
}
.MuiAlert-standardWarning::before {
position: absolute;
Expand Down Expand Up @@ -1564,6 +1565,16 @@ button.MuiPaginationItem-root:hover {
.list-clickable:focus {
border-left: 4px solid var(--button)
}
/* menus */
.MuiListItemButton-root {
border-left: 4px solid transparent !important;
}
.MuiListItemButton-root:hover {
border-left: 4px solid var(--button-half) !important;
}
.MuiListItemButton-root:focus, .MuiListItemButton-root:active{
border-left: 4px solid var(--button) !important;
}

/* clickable */
.clickable {
Expand Down Expand Up @@ -2597,6 +2608,7 @@ button.MuiPaginationItem-root:hover {
border-radius: var(--spacing-half);
position: relative;
min-height: calc(var(--button-height) * var(--spacing-1));
color: var(--on-background);
}
.MuiInputBase-root {
position: relative;
Expand Down Expand Up @@ -3323,30 +3335,3 @@ footer .MuiGrid-container {
position: absolute;
z-index: 0;
}

/* Dislexic Mode */
.dyslexic {
--primaryFont: 'OpenDyslexic';
--secondaryFont: 'OpenDyslexic';
--fontWeight-0: 400;
--fontWeight-1: 400;
--fontWeight-2: 400;
--fontWeight-3: 700;
--fontWeight-4: 700;
--standard-LineHeight: 180%;
--sm-LineHeight: 120%;
/* User assigned Typography Styles */
--buttonTypography: 400 var(--CTAFontSize) / var(--CTALineHeight) 'OpenDyslexic';
--sm-buttonTypography: 400 var(--CTA-SmallFontSize) / var(--CTA-SmallLineHeight) 'OpenDyslexic';
--chipTypography:400 var(--captionFontSize) / var(--captionLineHeight) 'OpenDyslexic';
--hero-heroTitleTypography: 700 var(--Display1FontSize) / var(--Display1LineHeight) 'OpenDyslexic';
--hero-heroBodyTypography: 400 var(--body1FontSize) / var(--body1LineHeight) 'OpenDyslexic';
--tableheaderTypography: 700 var(--label-1FontSize) / var(--label-1LineHeight) 'OpenDyslexic';
--tablebodyTypography: 400 var(--body1FontSize) / var(--body1LineHeight) 'OpenDyslexic';

}
.motion-sensitive {
--animation-speed: 0ms;
--animation-distance: 0px;
--animation-focus-distance: 0px;
}
Loading

0 comments on commit 580899c

Please sign in to comment.