From c637e70f22adcfd59e2b23275e71bd0bafe472bf Mon Sep 17 00:00:00 2001 From: Lise Noble Date: Mon, 18 Sep 2023 08:50:20 -0400 Subject: [PATCH] cleaned up palette and colors page and fixed tab hover --- code/src/data/themes | 12 + .../ui/src/components/CreateColorTheme.tsx | 211 +++++++++--------- code/src/ui/src/mui-a11y-tb/themes/Theme.css | 22 +- code/src/ui/src/pages/DesignSystemPage.css | 36 +-- .../colors/BackgroundColorsComponent.tsx | 10 +- .../src/pages/content/atoms/AtomicIntro.tsx | 39 ++-- 6 files changed, 165 insertions(+), 165 deletions(-) diff --git a/code/src/data/themes b/code/src/data/themes index b16db3bb..6068eac5 100644 --- a/code/src/data/themes +++ b/code/src/data/themes @@ -16,3 +16,15 @@ {"k":"0000000080","o":"0000001880","v":"001"} {"_id":21,"_uid":21,"_dt":1690987132713,"_s":"60450f224b47918c2f593c93a1ad6ea4"} {"atoms":{"colorPalette":{"colors":[{"name":"pink","hex":"#d04be2"},{"name":"green","hex":"#52ca88"},{"name":"blue","hex":"#62bbf1"}],"defaultColorName":"pink"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"gradient1":{},"gradient2":{},"gradientHeaderText":{}}},"defaultTheme":"default-initial-color-theme-instance"},"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":{}},"glowSettings":{},"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":1690986700788,"lastUpdateInMs":1690987132670},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Black Test","_id":{"$wrap":"$oid","v":21}} +{"k":"0000000051","o":"0000000000","v":"001"} +{"_id":18,"_uid":21,"_dt":1695039800837,"_a":"del"} + +{"k":"0000000051","o":"0000000000","v":"001"} +{"_id":19,"_uid":21,"_dt":1695039807443,"_a":"del"} + +{"k":"0000000051","o":"0000000000","v":"001"} +{"_id":21,"_uid":21,"_dt":1695039813529,"_a":"del"} + +{"k":"0000000080","o":"0000001604","v":"001"} +{"_id":22,"_uid":22,"_dt":1695039961086,"_s":"53446d69028936e4e284798bf9c90698"} +{"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":{}},"glowSettings":{},"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":1695039961025,"lastUpdateInMs":1695039961025},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Demo","_id":{"$wrap":"$oid","v":22}} diff --git a/code/src/ui/src/components/CreateColorTheme.tsx b/code/src/ui/src/components/CreateColorTheme.tsx index ec390e9e..f216bc57 100644 --- a/code/src/ui/src/components/CreateColorTheme.tsx +++ b/code/src/ui/src/components/CreateColorTheme.tsx @@ -3,7 +3,7 @@ * Licensed under MIT License. See License.txt in the project root for license information */ import React, { useEffect, useRef, useState } from 'react'; -import { Button } from '@mui/material'; +import { Button, Grid } from '@mui/material'; import { ColorTheme, ColorThemes, Event, EventType, Shade } from 'a11y-theme-builder-sdk'; import { ColorSelect } from './ColorSelect'; import { ColorPairSelect } from './ColorPairSelect'; @@ -99,7 +99,7 @@ export const CreateColorTheme: React.FC = ({atom, handleDefaultThemeIniti handleDefaultThemeInitialized(_colorTheme?.name || ""); } } - + if (_colorTheme) { return (
@@ -110,106 +110,112 @@ export const CreateColorTheme: React.FC = ({atom, handleDefaultThemeIniti application.

- -
-
-
-
-
Theme Colors
-
- - - -
-
-
-
Light Mode Backgrounds
-
- -
-
-
-
Dark Mode Backgrounds
-
Note: Your dark mode background options are limited to colors in the 800 and 900 range of your color palette.
-
- -
-
-
-
Gradient 1
-
Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.
-
- -
-
-
-
Gradient 2
-
Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.
-
- -
-
-
-
Button Color
-
Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.
-
- -
-
-
-
Icon Color
-
Note: Icons limited to colors with a contrast against your primary and secondary backgrounds of 3.1: 1 to meet WCAG 2.1 AA Guidelines.
-
- -
-
Sample Icon
-
-
- - - - - - - - - - -
-
-
-
-
-
-
Gradient Header Text
-
Note: Large text gradient colors are limited to those with a contrast against your background of 3.1: 1 to meet WCAG 2.1 AA Guidelines.
-
- -
-
-
-
Accent Color
-
This color will be used for non-critical or decorative accents and never appears with text or iconongraphy.
-
- -
-
-
-
-
- -
-
- - - - Your have successfully initialized your default color theme. If you - select Cancel on this dialog, you will be able to make further changes. - If you select OK or navigate away from this tab, you will no longer be - able to make changes and will be presented with a readonly representation - of this theme. - -
+ + + + +
+
+
+
+
Theme Colors
+
+ + + +
+
+
+
Light Mode Backgrounds
+
+ +
+
+
+
Dark Mode Backgrounds
+
Note: Your dark mode background options are limited to colors in the 800 and 900 range of your color palette.
+
+ +
+
+
+
Gradient 1
+
Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.
+
+ +
+
+
+
Gradient 2
+
Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.
+
+ +
+
+
+
Button Color
+
Note: The "To Color" will be limited to those colors with the same "On Color" or text color to make sure the gradiemt meets WCAG 2.1 AA contrast guidelines.
+
+ +
+
+
+
Icon Color
+
Note: Icons limited to colors with a contrast against your primary and secondary backgrounds of 3.1: 1 to meet WCAG 2.1 AA Guidelines.
+
+ +
+
Sample Icon
+
+
+ + + + + + + + + + +
+
+
+
+
+
+
Gradient Header Text
+
Note: Large text gradient colors are limited to those with a contrast against your background of 3.1: 1 to meet WCAG 2.1 AA Guidelines.
+
+ +
+
+
+
Accent Color
+
This color will be used for non-critical or decorative accents and never appears with text or iconongraphy.
+
+ +
+
+
+
+
+ +
+
+ + + + + + Your have successfully initialized your default color theme. If you + select Cancel on this dialog, you will be able to make further changes. + If you select OK or navigate away from this tab, you will no longer be + able to make changes and will be presented with a readonly representation + of this theme. + + + ); } else { return ( @@ -222,4 +228,3 @@ export const CreateColorTheme: React.FC = ({atom, handleDefaultThemeIniti ); } } - diff --git a/code/src/ui/src/mui-a11y-tb/themes/Theme.css b/code/src/ui/src/mui-a11y-tb/themes/Theme.css index f001e9e7..4f25412b 100644 --- a/code/src/ui/src/mui-a11y-tb/themes/Theme.css +++ b/code/src/ui/src/mui-a11y-tb/themes/Theme.css @@ -804,20 +804,20 @@ button.icon { min-width: calc(var(--spacing-1) * var(--button-height)); flex: none; } -button::after { +button:not(.MuiTab-root)::after { position: absolute; top: calc(0px - 3px - var(--animation-focus-distance)); bottom: calc(0px - 3px - var(--animation-focus-distance)); right: calc(0px - 3px - var(--animation-focus-distance)); left: calc(0px - 3px - var(--animation-focus-distance)); - border: calc(var(--border-1) * var(--button-border)) solid var(--button); + border: calc(var(--border-1) * var(--button-border)) solid var(--button) !important; background: transparent !important; opacity: 0; content: ''; transition: var(--animation-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) all; min-height: calc(var(--button-height) * var(--spacing-1) + var(--border-1) * var(--button-border) * 2px + 4px); } -button:not(.MuiButtonGroup-grouped)::after { +button:not(.MuiTab-root):not(.MuiButtonGroup-grouped)::after { border-radius: calc(var(--button-radius) * var(--radius-1) + 1.9px); } button.MuiButtonGroup-grouped:not(.MuiButtonGroup-groupedVertical):first-of-type::after { @@ -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:hover::after { +button:not(.MuiTab-root):hover::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)); @@ -864,7 +864,7 @@ button:hover::after { bottom: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); min-height: calc(var(--button-height) * var(--spacing-1) + var(--border-1) * var(--button-border) * 2px + 4px); } -button:focus::after { +button:not(.MuiTab-root):focus::after { opacity: 1; top: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); left: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); @@ -1468,6 +1468,18 @@ button.MuiPaginationItem-root:hover { background: transparent !important; color: var(--on-background) !important; } +.MuiTab-root.Mui-selected::after { + height: var(--spacing-half); + left: 0; + right: 0; + bottom: 2px; + content: ''; + position: absolute; + border: none; + top: unset; + border-bottom: 4px solid var(--button); + border-radius: 0px; +} /* secondary tabs */ .secondaryTab.MuiTab-root { font-size: var(--CTA-SmallFontSize); diff --git a/code/src/ui/src/pages/DesignSystemPage.css b/code/src/ui/src/pages/DesignSystemPage.css index 255ef7a4..28ff6bfe 100644 --- a/code/src/ui/src/pages/DesignSystemPage.css +++ b/code/src/ui/src/pages/DesignSystemPage.css @@ -227,38 +227,6 @@ cursor: pointer; position: relative; } - -.color-swatch::after { - position: absolute; - top: calc(0px - calc(var(--focusBorder) + 2px + var(--animation-focus-distance))); - left: calc(0px - calc(var(--focusBorder) + 2px + var(--animation-focus-distance))); - right: calc(0px - calc(var(--focusBorder) + 2px + var(--animation-focus-distance))); - bottom: calc(0px - calc(var(--focusBorder) + 2px + var(--animation-focus-distance))); - border-radius: calc(var(--spacing-1) + 1.6px); - border: var(--focusBorder) solid var(--button); - background: transparent !important; - opacity: 0; - content: ''; - transition: var(--animation-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) all; - z-index: 1; - pointer-events: none; -} -.color-swatch:hover::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)); - right: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); - bottom: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); - min-height: calc(var(--button-height) * var(--spacing-1) + var(--border-1) * var(--button-border) * 2px + 4px); -} -.color-swatch:focus::after { - opacity: 1; - top: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); - left: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); - right: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); - bottom: calc(0px - calc(calc(var(--border-1) * var(--button-border)) + 2px)); - min-height: calc(var(--button-height) * var(--spacing-1) + var(--border-1) * var(--button-border) * 2px + 4px); -} .windowOverlay { position: fixed; top:0; @@ -382,9 +350,7 @@ .design-system-editor-right-content .black .hotlink { color: var(--white); } -.design-system-editor-right-content .white .color-box { - background: var(--black); -} + .design-system-editor-right-content .white .hotlink { color: var(--black); } diff --git a/code/src/ui/src/pages/components/colors/BackgroundColorsComponent.tsx b/code/src/ui/src/pages/components/colors/BackgroundColorsComponent.tsx index b0012aca..253fecd0 100644 --- a/code/src/ui/src/pages/components/colors/BackgroundColorsComponent.tsx +++ b/code/src/ui/src/pages/components/colors/BackgroundColorsComponent.tsx @@ -19,23 +19,23 @@ export const BackgroundColorsComponent: React.FC = ({}) => {
diff --git a/code/src/ui/src/pages/content/atoms/AtomicIntro.tsx b/code/src/ui/src/pages/content/atoms/AtomicIntro.tsx index a83d9a79..8a5f1ac0 100644 --- a/code/src/ui/src/pages/content/atoms/AtomicIntro.tsx +++ b/code/src/ui/src/pages/content/atoms/AtomicIntro.tsx @@ -3,6 +3,7 @@ * Licensed under MIT License. See License.txt in the project root for license information */ import React from 'react' +import { Grid } from '@mui/material'; interface Props { changeTab(newTabIndex: string): void; @@ -13,24 +14,28 @@ const AtomicIntro: React.FC = ({changeTab}) => { return ( <> -

Atoms

-
-
Getting Started with Atoms
-

- To get started you will define your atoms, which are the very basic building blocks of your design language. -

-

- Complete the following two steps to unlock the rest of the tool: -

-
    -
  1. Define your changeTab("colorPalette")}>Color Palette
    2. -
  2. Define your changeTab("colorThemes")}>Color Theme
    3. -
-

-
Have Fun!
-
+ + +

Atoms

+
+
Getting Started with Atoms
+

+ To get started you will define your atoms, which are the very basic building blocks of your design language. +

+

+ Complete the following two steps to unlock the rest of the tool: +

+
    +
  1. Define your changeTab("colorPalette")}>Color Palette
    2. +
  2. Define your changeTab("colorThemes")}>Color Theme
    3. +
+

+
Have Fun!
+
+ + ) } -export default AtomicIntro; \ No newline at end of file +export default AtomicIntro;