From 5231aaaba5aaed9e3a3d3e56dcbe0ee5a9a0746c Mon Sep 17 00:00:00 2001 From: David Blundell Date: Tue, 20 Aug 2024 11:45:09 -0400 Subject: [PATCH 01/14] Tidied up existing styles --- src/scss/_base.scss | 22 ------ src/scss/_common.scss | 117 ----------------------------- src/scss/_variables.scss | 37 --------- src/scss/components/Home.scss | 4 + src/scss/definitions/_colours.scss | 8 +- 5 files changed, 10 insertions(+), 178 deletions(-) delete mode 100644 src/scss/_variables.scss diff --git a/src/scss/_base.scss b/src/scss/_base.scss index e8253599..8c1b8467 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -37,29 +37,7 @@ body { } button { - background-color: #1a1a1a; - padding: 0.6em 1.2em; - border-radius: 8px; - border: none; - appearance: none; - font-family: inherit; - font-size: 1em; - font-weight: 500; - box-shadow: - 0 8px 28px -6px rgb(24 39 75 / 12%), - 0 18px 88px -4px rgb(24 39 75 / 14%); - cursor: pointer; opacity: 0.9; - transition: border-color 0.25s; - - &:hover { - border-color: #646cff; - } - - &:focus, - &:focus-visible { - outline: 4px auto -webkit-focus-ring-color; - } } a { diff --git a/src/scss/_common.scss b/src/scss/_common.scss index f3c3fda6..0fcd43a0 100644 --- a/src/scss/_common.scss +++ b/src/scss/_common.scss @@ -1,123 +1,6 @@ // SPDX-License-Identifier: Apache-2.0 // // SPDX-FileCopyrightText: © 2024 Tenstorrent Inc. -@use 'sass:color'; -@use 'definitions/colours' as *; - -.bp5-control input:focus ~ .bp5-control-indicator { - outline: $focus-ring solid 2px; - outline-offset: 0; -} - -:focus { - outline: $focus-ring solid 2px; - outline-offset: 0; -} - -.node-item:focus { - outline: none; - - // outline-offset: -2px; -} - -.tt-keyboard-focus { - .node-item:focus { - outline: $focus-ring solid 2px; - outline-offset: -2px; - } -} - -$top-nav-height: 70px; -$footer-height: 20px; - -// Full app layout, which is side bar, top nav, main content, and footer -.app { - color: $tt-white-text; - - // display: grid; - grid-template-columns: 50px 1fr; - grid-template-rows: $top-nav-height 1fr; -} - -.footer { - position: absolute; - bottom: 0; - min-width: 100vw; - background: $tt-purple; - min-height: #{$footer-height}; - display: flex; -} - -.data-box { - border: 2px solid $tt-light-gray; - border-radius: 15px; - padding: 10px; - margin-right: 10px; - margin-top: 10px; - - h3 { - margin: 5px 0; - } -} - -.header { - margin-top: 10px; - display: flex; - justify-content: flex-start; - align-items: center; - gap: 20px; - margin-inline-end: 10px; -} - -.splash-screen { - display: flex; - place-content: center center; - margin-top: 100px; -} - -button, -.button { - background-color: $tt-medium-blue; - border: none; - border-radius: 2px; - color: #fff; - cursor: pointer; - display: inline-flex; - flex-direction: row; - justify-content: center; - align-items: center; - font-weight: 200; - font-size: 16px; - line-height: 120%; - padding: 5px 36px; - text-align: center; - text-decoration: none; - transition: - color 250ms linear, - background-color 250ms linear; - - &:not(.node-item) { - &:hover { - background-color: color.adjust($tt-medium-blue, $lightness: 20%); - } - - // &:focus { - // outline: none; - // } - } - - &.node-item { - background-color: inherit; - cursor: default; - transition: - color 100ms linear, - background-color 100ms linear; - - &:hover { - background-color: color.adjust($tt-medium-blue, $alpha: -0.9); - } - } -} .monospace { font-family: monospace; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss deleted file mode 100644 index 105bf0c8..00000000 --- a/src/scss/_variables.scss +++ /dev/null @@ -1,37 +0,0 @@ -// SPDX-License-Identifier: Apache-2.0 -// -// SPDX-FileCopyrightText: © 2024 Tenstorrent Inc. - -/* Layout sizes */ -$top-bar-height: 50px; -$initial-dock-height: 340px; -$sidebar-width: 30px; -$controls-panel-width: 230px; -$compute-node-width: 260px; -$properties-panel-width: 300px; - -/* Media query mixins */ -$desktop: 1024px; -$desktop-large: 1440px; -$desktop-4k: 2560px; - -@mixin min-desktop { - @media (min-width: $desktop) { - @content; - } -} - -@mixin min-desktop-large { - @media (min-width: $desktop-large) { - @content; - } -} - -@mixin min-desktop-4k { - @media (min-width: $desktop-4k) { - @content; - } -} - -$detailed-view-zindex: 80; -$cluster-view-zindex: 100; diff --git a/src/scss/components/Home.scss b/src/scss/components/Home.scss index 845260a0..8d0eae0b 100644 --- a/src/scss/components/Home.scss +++ b/src/scss/components/Home.scss @@ -3,6 +3,10 @@ @use '../definitions/colours' as *; .home { + display: flex; + place-content: center center; + margin-top: 100px; + h3 { margin: 0; } diff --git a/src/scss/definitions/_colours.scss b/src/scss/definitions/_colours.scss index fee7d977..45bca7f4 100644 --- a/src/scss/definitions/_colours.scss +++ b/src/scss/definitions/_colours.scss @@ -48,8 +48,12 @@ $link-color: $detailed-view-light-text; // branding colors: $tt-primary-yellow: #f6bc42; - $tt-tint-yellow: #f9d68e; $tt-tint-blue: #9ca8f2; - $tt-accent-red: #fa512e; + + +// $tt-purple: #7C68FA; +// $tt-slate: #EDEFF9; +// $tt-black: #202020; +// $tt-white: #FFFFFF; From 7d1ae6276ac69ec537fa55e36fd0779d7da0c17d Mon Sep 17 00:00:00 2001 From: David Blundell Date: Wed, 21 Aug 2024 09:40:35 -0400 Subject: [PATCH 02/14] Added styleguide page --- src/definitions/routes.ts | 1 + src/main.tsx | 5 ++ src/routes/Styleguide.tsx | 134 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+) create mode 100644 src/routes/Styleguide.tsx diff --git a/src/definitions/routes.ts b/src/definitions/routes.ts index 3b0b015d..8705b0f7 100644 --- a/src/definitions/routes.ts +++ b/src/definitions/routes.ts @@ -5,6 +5,7 @@ const ROUTES = Object.freeze({ HOME: '/', OPERATIONS: '/operations', + STYLEGUIDE: '/styleguide', }); export default ROUTES; diff --git a/src/main.tsx b/src/main.tsx index 9859aca0..9b9f8917 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -14,6 +14,7 @@ import Layout from './components/Layout'; import Home from './routes/Home'; import Operations from './routes/Operations'; import OperationDetails from './routes/OperationDetails'; +import Styleguide from './routes/Styleguide'; import ROUTES from './definitions/routes'; const router = createBrowserRouter([ @@ -34,6 +35,10 @@ const router = createBrowserRouter([ path: 'operations/:operationId', element: , }, + { + path: 'styleguide', + element: , + }, ], }, ]); diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx new file mode 100644 index 00000000..ae680ffa --- /dev/null +++ b/src/routes/Styleguide.tsx @@ -0,0 +1,134 @@ +// SPDX-License-Identifier: Apache-2.0 +// +// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC + +import { Button, Intent } from '@blueprintjs/core'; +import { IconNames } from '@blueprintjs/icons'; +import { Helmet } from 'react-helmet-async'; + +export default function Operations() { + return ( + <> + + +

Typography

+ +

+ Font family +

+

Arial Nova, Arial, sans-serif

+ +

Heading H1

+

Heading H2

+

Heading H3

+

Heading H4

+
Heading H5
+ +

+ Paragraph +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laborum atque suscipit. Officiis fugit + necessitatibus libero perspiciatis sequi accusantium earum repudiandae deserunt nemo, voluptatem tempora + laborum eaque minima molestiae eveniet. +

+ +

+ Monospace +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nemo velit molestias quae temporibus + sint in at consectetur voluptatem obcaecati, saepe, ratione, reprehenderit perferendis quas explicabo + error repellendus deserunt? Optio! +

+ +

Buttons

+ +
+
+

Default

+ + + +
+ +
+

Primary

+ + + +
+ +
+

Success

+ + + +
+ +
+

Warning

+ + + +
+ +
+

Danger

+ + + +
+
+ + ); +} From d46d2a4e1fd9e99cb7e757a9fbea6d7b505c32eb Mon Sep 17 00:00:00 2001 From: David Blundell Date: Wed, 21 Aug 2024 09:43:42 -0400 Subject: [PATCH 03/14] Added new colours and cleaned up usages --- .../ConnectionTestMessage.tsx | 2 +- .../RemoteConnectionDialog.tsx | 1 + src/scss/_base.scss | 24 +--- src/scss/components/Collapsible.scss | 3 +- src/scss/components/Home.scss | 5 - src/scss/components/Operation.scss | 9 +- src/scss/components/OperationArguments.scss | 1 - .../components/OperationDetailsComponent.scss | 12 +- .../components/RemoteConnectionDialog.scss | 10 +- src/scss/definitions/_colours.scss | 112 +++++++++++------- 10 files changed, 86 insertions(+), 93 deletions(-) diff --git a/src/components/report-selection/ConnectionTestMessage.tsx b/src/components/report-selection/ConnectionTestMessage.tsx index 13c07658..17b90f98 100644 --- a/src/components/report-selection/ConnectionTestMessage.tsx +++ b/src/components/report-selection/ConnectionTestMessage.tsx @@ -27,7 +27,7 @@ const INTENT_MAP: Record = { function ConnectionTestMessage({ status, message }: ConnectionTestMessageProps) { return ( -
+
= ({ /> + Date: Wed, 21 Aug 2024 16:17:26 -0400 Subject: [PATCH 04/14] Building out styleguide --- src/components/OperationList.tsx | 4 +- src/components/ProgressBar.tsx | 7 +- src/routes/Operations.tsx | 2 +- src/routes/Styleguide.tsx | 365 +++++++++++++++++- src/scss/_blueprintjs.scss | 145 ++++++- src/scss/components/Operation.scss | 2 +- .../components/RemoteConnectionDialog.scss | 6 +- src/scss/definitions/_colours.scss | 78 ++-- 8 files changed, 551 insertions(+), 58 deletions(-) diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx index 3ab283cc..0c3423c5 100644 --- a/src/components/OperationList.tsx +++ b/src/components/OperationList.tsx @@ -19,7 +19,7 @@ import { useOperationsList } from '../hooks/useAPI'; import ROUTES from '../definitions/routes'; import { expandedOperationsAtom } from '../store/app'; import MicroOperations from './MicroOperations'; -import { OperationDescription } from "../model/APIData"; +import { OperationDescription } from '../model/APIData'; const PLACEHOLDER_ARRAY_SIZE = 10; const OPERATION_EL_HEIGHT = 39; // Height in px of each list item @@ -296,7 +296,7 @@ const OperationList = () => { >

- Python execution time: {operation.duration} s + Python execution time: {operation.duration}s

{operation.arguments && ( diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index b3148b3f..6a548e12 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -1,4 +1,4 @@ -import { ProgressBar as BlueprintProgressBar, Intent } from '@blueprintjs/core'; +import { ProgressBar as BlueprintProgressBar } from '@blueprintjs/core'; import 'styles/components/ProgressBar.scss'; import { UploadProgress } from '../hooks/useLocal'; @@ -13,10 +13,7 @@ function ProgressBar({ progress, estimated }: UploadProgress) { )} - +
); } diff --git a/src/routes/Operations.tsx b/src/routes/Operations.tsx index e564fc39..c03d6cc1 100644 --- a/src/routes/Operations.tsx +++ b/src/routes/Operations.tsx @@ -23,7 +23,7 @@ export default function Operations() { return ( <> - ; + ); } diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx index ae680ffa..a12c809c 100644 --- a/src/routes/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -2,9 +2,13 @@ // // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC -import { Button, Intent } from '@blueprintjs/core'; +import { Button, ButtonGroup, FormGroup, Intent, PopoverPosition, Switch, Tooltip } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import { Helmet } from 'react-helmet-async'; +import ConnectionTestMessage from '../components/report-selection/ConnectionTestMessage'; +import { ConnectionTestStates } from '../definitions/ConnectionStatus'; +import ProgressBar from '../components/ProgressBar'; +import SearchField from '../components/SearchField'; export default function Operations() { return ( @@ -16,6 +20,7 @@ export default function Operations() {

Font family

+

Arial Nova, Arial, sans-serif

Heading H1

@@ -28,9 +33,9 @@ export default function Operations() { Paragraph

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laborum atque suscipit. Officiis fugit - necessitatibus libero perspiciatis sequi accusantium earum repudiandae deserunt nemo, voluptatem tempora - laborum eaque minima molestiae eveniet. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laborum atque suscipit. Officiis + fugit necessitatibus libero perspiciatis sequi accusantium earum repudiandae deserunt + nemo, voluptatem tempora laborum eaque minima molestiae eveniet.

@@ -44,7 +49,61 @@ export default function Operations() {

Buttons

-
+ + + + + +
@@ -73,6 +180,54 @@ export default function Operations() { > Your text here + + + +
@@ -91,6 +246,54 @@ export default function Operations() { > Your text here + + + +
@@ -109,6 +312,54 @@ export default function Operations() { > Your text here + + + +
@@ -127,8 +378,112 @@ export default function Operations() { > Your text here + + + +
+ +

Form elements

+ + + {}} + /> + + + + + + + + +

Status

+ +

Progress bar

+ +
+ +
+ +

Connection message

+ + + + + ); } diff --git a/src/scss/_blueprintjs.scss b/src/scss/_blueprintjs.scss index c7cba9ee..6e53eb08 100644 --- a/src/scss/_blueprintjs.scss +++ b/src/scss/_blueprintjs.scss @@ -1,7 +1,150 @@ // SPDX-License-Identifier: Apache-2.0 // // SPDX-FileCopyrightText: © 2024 Tenstorrent Inc. + +@use 'sass:color'; @use './definitions/colours' as *; @use "@blueprintjs/core/src/blueprint.scss" with ( - $pt-dark-icon-color: $tt-light-gray + // $dark-button-background-color: $tt-slate, + // $dark-button-background-color-hover: color.adjust($tt-slate, $lightness: -5%), + // $dark-minimal-button-background-color-hover: rgba($tt-purple-accent, 20%), + // $pt-dark-text-color + $control-checked-background-color: $tt-purple-accent, + $control-checked-background-color-hover: color.adjust($tt-purple-accent, $lightness: -3%), + $control-checked-background-color-active: color.adjust($tt-purple-accent, $lightness: -6%), + $dark-progress-track-color: $tt-teal-shade, + $dark-progress-head-color: $tt-teal-accent, + // $dark-control-checked-background-color: #abc123, + $pt-dark-icon-color: $tt-white, + // "intent": (default, hover, active colors) + // $button-intents: ( + // "primary": (#abc123, #abc123, #abc123), + // "success": (#abc123, #abc123, #abc123), + // "warning": (#abc123, #abc123, #abc123), + // "danger": (#abc123, #abc123, #abc123) + // ), + // $pt-intent-colors: ( + // "primary": $tt-purple, + // "success": red, + // "warning": red, + // "danger" : red, + // ), + // $pt-dark-intent-text-colors: ( + // "primary": $tt-purple-accent, + // "success": $tt-green-accent, + // "warning": $tt-yellow, + // "danger" : $tt-red, + // ), + // $pt-dark-input-intent-box-shadow-colors: ( + // "primary": #abc123, + // "success": #abc123, + // "warning": #abc123, + // "danger": #abc123, + // ) ); + +// Default +.btn-default { + background-color: $tt-slate !important; + + &:hover { + background-color: color.adjust($tt-slate, $lightness: -5%) !important; + } + + .bp5-icon { + color: inherit !important; + } + + &.bp5-minimal { + background-color: transparent !important; + color: $tt-slate-tint-1 !important; + + &:hover { + background-color: rgba($tt-slate, 20%) !important; + } + } +} + +// Primary +.btn { + background-color: #2d72d2; + background-color: $tt-purple-shade !important; + + &:hover { + // background-color: #2d72d2; + background-color: color.adjust($tt-purple-shade, $lightness: -5%) !important; + } + + &.bp5-minimal { + background-color: transparent !important; + color: $tt-purple !important; + + &:hover { + // background-color: rgb(45 114 210 / 20%); + background-color: rgba($tt-purple-accent, 20%) !important; + } + } +} + +// Success +.btn-success { + background-color: #cd4246; + background-color: $tt-green-accent !important; + + &:hover { + background-color: #ac2f33; + background-color: color.adjust($tt-green-accent, $lightness: -5%) !important; + } + + &.bp5-minimal { + background-color: transparent !important; + color: $tt-green-tint-1 !important; + + &:hover { + // background-color: rgb(45 114 210 / 20%); + background-color: rgba($tt-green-accent, 20%) !important; + } + } +} + +// Warning +.btn-warning { + background-color: #cd4246; + background-color: $tt-yellow !important; + + &:hover { + background-color: #ac2f33; + background-color: color.adjust($tt-yellow, $lightness: -5%) !important; + } + + &.bp5-minimal { + background-color: transparent !important; + color: $tt-yellow-tint-1 !important; + + &:hover { + // background-color: rgb(45 114 210 / 20%); + background-color: rgba($tt-yellow, 20%) !important; + } + } +} + +// Danger +.btn-error { + background-color: #cd4246; + background-color: $tt-red-accent !important; + + &:hover { + background-color: #ac2f33; + background-color: color.adjust($tt-red-accent, $lightness: -5%) !important; + } + + &.bp5-minimal { + background-color: transparent !important; + color: $tt-red !important; + + &:hover { + // background-color: rgb(45 114 210 / 20%); + background-color: rgba($tt-red-accent, 20%) !important; + } + } +} diff --git a/src/scss/components/Operation.scss b/src/scss/components/Operation.scss index 62b5ea12..a09cf483 100644 --- a/src/scss/components/Operation.scss +++ b/src/scss/components/Operation.scss @@ -11,7 +11,7 @@ font-size: 20px; .operation-icon.bp5-icon svg { - fill: $tt-yellow-tint-1 + fill: $tt-yellow } .highlighted-text { diff --git a/src/scss/components/RemoteConnectionDialog.scss b/src/scss/components/RemoteConnectionDialog.scss index 69649fbd..0619a04b 100644 --- a/src/scss/components/RemoteConnectionDialog.scss +++ b/src/scss/components/RemoteConnectionDialog.scss @@ -4,6 +4,8 @@ @use "../definitions/colours" as *; +$tt-pending: #ffd500; + .bp5-dialog.remote-connection-dialog { background-color: $tt-slight-off-background; @@ -32,14 +34,14 @@ animation: 0.7s steps(2) infinite alternate both; } - &.status-idle .connection-status-icon { color: $tt-idle; } + &.status-idle .connection-status-icon { color: $tt-medium-gray; } &.status-progress .connection-status-icon { animation-name: connection-test-progress; color: $tt-pending; } + &.status-failed .connection-status-icon { color: $tt-error; } - &.status-ok .connection-status-icon { color: $tt-success; } } @keyframes connection-test-progress { diff --git a/src/scss/definitions/_colours.scss b/src/scss/definitions/_colours.scss index 8faae7ba..62a9c605 100644 --- a/src/scss/definitions/_colours.scss +++ b/src/scss/definitions/_colours.scss @@ -14,68 +14,64 @@ $tt-medium-gray: #909096; $tt-dark-gray: #606066; // New colours -$tt-white: #FFF; +$tt-white: #fff; $tt-black: #202020; -$tt-dark-grey: #363636; // tt-purple -$tt-purple: #BCB3F7; -$tt-purple-tint-1: #D0C8FF; -$tt-purple-tint-2: #E2DEFC; -$tt-purple-accent: #7C68FA; -$tt-purple-shade: #4B456E; +$tt-purple: #bcb3f7; +$tt-purple-tint-1: #d0c8ff; +$tt-purple-tint-2: #e2defc; +$tt-purple-accent: #7c68fa; +$tt-purple-shade: #4b456e; // tt-red -$tt-red: #FF9E8A; -$tt-red-tint-1: #EAB1A5; -$tt-red-tint-2: #F4D8D2; -$tt-red-accent: #FA512E; -$tt-red-shade: #8D2914; +$tt-red: #ff9e8a; +$tt-red-tint-1: #eab1a5; +$tt-red-tint-2: #f4d8d2; +$tt-red-accent: #fa512e; +$tt-red-shade: #8d2914; // tt-blue -$tt-blue: #7584E6; -$tt-blue-tint-1: #9CA8F2; -$tt-blue-tint-2: #CCD2F9; -$tt-blue-accent: #5164E0; -$tt-blue-shade: #252C5B; +$tt-blue: #7584e6; +$tt-blue-tint-1: #9ca8f2; +$tt-blue-tint-2: #ccd2f9; +$tt-blue-accent: #5164e0; +$tt-blue-shade: #252c5b; // tt-yellow -$tt-yellow: #F6BC42; -$tt-yellow-tint-1: #F9D68E; -$tt-yellow-tint-2: #F5E2BA; -$tt-yellow-accent: #C2A261; -$tt-yellow-shade: #8B7039; +$tt-yellow: #f6bc42; +$tt-yellow-tint-1: #f9d68e; +$tt-yellow-tint-2: #f5e2ba; +$tt-yellow-accent: #c2a261; +$tt-yellow-shade: #8b7039; // tt-teal -$tt-teal: #74C5DF; -$tt-teal-tint-1: #9BDBF0; -$tt-teal-tint-2: #C7F1FF; -$tt-teal-accent: #3EB7DE; -$tt-teal-shade: #0D4D62; +$tt-teal: #74c5df; +$tt-teal-tint-1: #9bdbf0; +$tt-teal-tint-2: #c7f1ff; +$tt-teal-accent: #3eb7de; +$tt-teal-shade: #0d4d62; // tt-green -$tt-green: #6FABA0; -$tt-green-tint-1: #92C9BF; -$tt-green-tint-2: #C7EFE8; -$tt-green-accent: #608C84; +$tt-green: #6faba0; +$tt-green-tint-1: #92c9bf; +$tt-green-tint-2: #c7efe8; +$tt-green-accent: #608c84; $tt-green-shade: #103525; // tt-sand -$tt-sand: #CDC2A6; -$tt-sand-tint-1: #E5D7B5; -$tt-sand-tint-2: #EEEAE0; -$tt-sand-accent: #A2987A; -$tt-sand-shade: #3A3433; +$tt-sand: #cdc2a6; +$tt-sand-tint-1: #e5d7b5; +$tt-sand-tint-2: #eeeae0; +$tt-sand-accent: #a2987a; +$tt-sand-shade: #3a3433; // tt-slate $tt-slate: #737999; -$tt-slate-tint-1: #979DBD; -$tt-slate-tint-2: #EDEFF9; +$tt-slate-tint-1: #979dbd; +$tt-slate-tint-2: #edeff9; $tt-slate-accent: #606891; $tt-slate-shade: #101636; // States -$tt-idle: #909096; -$tt-success: #9f0; -$tt-pending: #ffd500; $tt-error: #ff3c00; From 6681781465d6fe08ddf8e87940fca35557167ed7 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Thu, 22 Aug 2024 15:52:45 -0400 Subject: [PATCH 05/14] Replaced favicon --- favicon.ico | Bin 15086 -> 15086 bytes public/favicon/android-chrome-192x192.png | Bin 5449 -> 1354 bytes public/favicon/android-chrome-512x512.png | Bin 15272 -> 3358 bytes public/favicon/favicon-32x32.png | Bin 1173 -> 490 bytes public/favicon/favicon.svg | 21 +++++++-------------- 5 files changed, 7 insertions(+), 14 deletions(-) diff --git a/favicon.ico b/favicon.ico index 7d82424b702ec9aef82b976cce63348f103d6c43..07a7d23307c61ef73970c3e432a7dd8cde14e0f0 100644 GIT binary patch literal 15086 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 PUlxba+h`<_9;N>Qlc09L diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png index eb6af6a840349b4aae7f2ddbd141a81be991827c..0d203396f14f95846e2cabfd10400f76c05eb3ca 100644 GIT binary patch delta 1224 zcmV;(1ULK1D#{9w7zqRe0001>@^LhgArpTAb5ch_0Itp)=>Px#7*I@9MNDaN`cW?W zP%ZjUF8Wa}`%o_WQ7-yXF1+hGZU6uP2XsPimvfcWH%sW4N$|gIuw7N zQv|xd-^hw$opih-kK|OnS-J0=Jn}>y9RNh%fu#*Fb$NSYJzvzk_18Q1wr2rc!+CtQ zbI!fLvH+Zqym@h*S{8t_p{wgvu>f?!(G4nD0P2Pg?yi~zpl#^v#%fpq%7(Vy`ebhu z)D5k7KES>2S%B1rRxfTUnm3BCkGy{;1c0xW1&D9x*@aZH0I>}nU05{>fQQ4Q!}Ny* za3>@~qw5pQTBJYn%%C1&&jN(PVHI0HZPp^Sp`bw-W-U@1y1JAq7GO#^y0l6bz~9ip zQB<=4;|-l1O$`fh-_Vx0ek>e{$cENCDj<@(3w%SX7e^Nw4h0&Y8_xQ;Sqp!3LuMmahIHjf$gn){0oh$)h*OFdM zCIH|UtK)M$9}v459+`hN8xX(T-pT9iK7HS8UVWH16tCUN}s!P z0MrqwTkg&P(C6B^aL52K2H`F_0M;nqBOh?${lI|>sDP=TyvKiW*M}dh*~Rr=K7cd3 zxY}g^sPk!kXyyROf!UpeSpe#|W|toG0JPb~TY}F7P@=OxqH=!$>G`zJLpB?bGVAb~ zkPS%W;IFsxd_dH!_qsv=h?({NDkuTqC;8}QRs_JpVO*Wc0O4@(N){m?blmzymlQA$ zhe_Ee1EIkP2WhYv^i92hf`}c$=UD zxaIEf^`H{q!>oVEjgA(;waA^68UWJ*SO5!P0W5$8umBdo0{DLcTOOcc1AsM5Swn^x z!;~dti9AeML8chPlzF0k(<^`d m>0)BgS?(^uP)8GkdS-2H*M|+)p#K0m%^p(4x}e3A+7xf|vLGA) literal 5449 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 diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png index 6a2ea7d86c263c458a2dc528e7d47fbb24bd5eba..6fa317f8bcb498f4f7bd7e8d2c5d9a21476406b7 100644 GIT binary patch literal 3358 zcmcgvi#ycY`d{CfG2=4ExRmSgEhmXE6_Q&cvv+JZV~&GEYBU)4+*6beFQeK^GReWP0*|6t5^Ww+}5 zp9SfB|7*8An2(evXX*tX#V;OfE2DQKS4SE%W~k6G@ZndHu|I=@n?E$m{WQ83l?X@q5mk20)SFH)z+ zQ$t&D?G*a&S4*w*XdhwA#?qMsP&D36xLe|*U6tN>U}s^1nl}%wS=cnO)%4-P8p^1zP@tOpIRtW+%y%c3wj~8zoBdKC6nX7sGnWZzrNC|_y zEQsMnutAMjsrI3f3Y~ppOI6z5M~_!o$p|Rmhu@GS@bC^5N=lm^mG#Jw8C9iQdDcnr zE0Ew904;KhI<@KbOWWUM`-koPUyX0Rv(y|Kwu_Ae*$*kzxoOkmw2&5@mt1i#^ns$x zI>L)5RY)S=KPup3E0p!nCO`v|3if#>JY=YJcx+m3;##Vkx^;|363?dRDh{OL!5LTKNKe&LMX#Y%LojhV=dJ# z2tut;K~EKWfcb$&Z!i*HcoMv$R;Zz8%q!JVLt-div{Bp`0t%=Vny4<(kkC&O3_|7{ z;S5win6d$x2MQ%*5Q4z0pFYI;2MvdMTftb?eF_;H zsbEsTP(s7he!=AA@dKc@b=Vg0k;C=_^K*zP(m+)qh&Gh6t&!XDG#HJsf)z*i5r4o~ zceNdav|AW@s32^=%4iiOQ&wa`e2MwaEjob|P*sQ`BUpVj)ch7v^nt{~uYF&ufoucW zW1#XjY4kh>sD1{US4GK~#HM8Xn?(@o2F~`uX${~o_1-P`(n|MnCGpN|kA#d^y*;^p zK^ZXyp`0LyCbz`Z0AF5Y-7F%20aE4$Ggcwlay{Ht34BTTcxCl(k}Hp}X+^RihQ9i` zTMCi3kIs0tTD|(`uzWbu<7c5h0|Ge0zP?szj7m7+<4KhgX~sdK<8%GTSDsd?l}kO+@g0y#m=BOkX?1C z_c3U_RMhvPB@DE1*v*MM*TAKE?6vE?E6<3qKJmi5_ZW^`Ln;?8KZCvxL1IHaFDRh_ z3*EjZ!ietjbA4-+qHS_KtAvW`fBfs8ZGB6?l7j>@NpQ!l|tJiPc}v=Oc~~$=&&G>}E}AhR?*6Kp1u3<~rZ;Un3pSKo6X& zYNDhP&NLSbGWVb-Hg{|uGPwn&ra66afM|EBuaD5Z$NE_nRG4uw-j{&dOwVp?fCv9G zhg}epwYg28UWaBHhfPR=l1tUmS(zjs6J!d@bNU^8RDdhvFl$E<={x)ZaLF2x4kk2$ zOEyT*3|2Y`JS>-INpHF8%wTv4n2}x_c^S9ut$^BmZMN;jkT>zEr__1~ykyM0ndVIb z?}F631`4b|E!iJAsu1~;PtgRa`@V71n0)uYs}4ltbD}E_EK23nBsKEm5h`l*2Pd=< zlOJPLE0m#r@|i*v3p*Y&Iur`uJ?+WXM6(iqyP=9^CI6%VU#OOE~jB$>fy{-c3wZ~;Ffrvt#Pk!cl7)BswC78ei#BL{@ASi#d zFJd1Qt9JF&G#HNZ(D@BGdzELHf`}lUv2qHHfRNBWDxF}#zKBq4Q5K{8C4QP1?HdW5 zPdiyE#%X@v$`ez?(&FP_l&3B@EDK&X|8gq0H3+aC6?-0+LW{l|ZELla0#?aFpM?t^ zJlEO0XlqXZ-lJ27M~;E&Lj&`DJ(mFO-;2qvpZ7t9);YVRz-s64$gfAdfwTfA9YT|= z#B251W`IXcI&YVzMO&vPU1Zr)uU7Z%4HjMY9IdH*p992(d3yc$mgz6pK6jkj-Y=1(! z!O}K|D|tuM8k28V-yp5F6h>NiAm~gi;s=it8UF=DHZNn`}!Zx z$%7=d9ywY+wd4S#+trq~>*QsD$iLmwuo?n+{6s-#eX~UrR#ti!#luck-MJxUJJgZ%+6DizGPkwuG(q)saIJv9 z?t1ZyhI?0IMr!%$8HuRd%|mf>nm;h^fFIt6S?1 pcl7_+-ukvxtCi4!I28V53}#dnV;7H^WlKT;#~)nimB(1A{{eU!jI;m% literal 15272 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 delta 1047 zcmaFGJe6~T1SbbG0|SH0lCEPD6@}{+l0AZa85pY67#JE_7#My5r5au^Fq9fFFuY1& zV6d9Oz#v{QXIG#N0|R4KfKP}kP=Sewy^)c%p&=027#Z0B89)*!ZfxvgXlQ9*07MQ3 z1{OdDSdF!wo;eWd>w}~W4XwZks29kvt_P~q(J|H4HC0#F2O=OtSJzxoQAbzT42Wc9 z)q&ZBVuu)BpUa75jl%-3sZ()3Ro27-jxw&gpa9yx( zQAPHK;`Eh)KKZ~9=(PCpQ&LO?yRJXmQ_SLJxik={kuk~J-KBQfMuC$+4rhT!WPLG^Q3k?{e${Fm zKn8n>r>`sf3wBOEKIQWhFDe5yIeEG`hFF|VPFNtGkdl;^=*pyXCg+U|N2Z@%tWLvh z_H_;6;@S_IXC7SN&CKB-%Hg!5>K9u8r?WDLE=#Ba&m)Q1GiJ@48Qq|&vvy6c!xoN^ zMvV!%+39Rd-}vhL5?I6h&N)Q!ta6Y!QD)f86mGtONxOW(0+x_QmQ73xY~^-{R8%>J zRQ!Gr@Zj}w{z>2Y52QA&Uze8?)v=@EVolRF7Jl6I zf~%xdSSXQe(j-NbSxk4QTrm-tI&b32?o|##r_P@_b?)TZ)A}d0>Ro~r_`)Yl4GrN@ zxggr1sL8-w!n$aO$N?p9iBtNTttX~Wb7WnzfNRM^&lP)=v{xI+pPSmKHNjP7)2dgq zv{?N4re!?csP4&HaVR|GklOk+O(!H)WxbM`HOa#v*x5UpUAMS!g%Y#YvnYn|LhbSM zf*H;NgIKl1HKHUXu_V - - - - - - - - - - - - - \ No newline at end of file + + + + + + + From 3321b3e4d545da20731a252be2dcd9e7a6d94c23 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Fri, 23 Aug 2024 11:10:20 -0400 Subject: [PATCH 06/14] Replaced colour --- src/scss/components/StackTrace.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/components/StackTrace.scss b/src/scss/components/StackTrace.scss index c8ac29ab..9bca99b7 100644 --- a/src/scss/components/StackTrace.scss +++ b/src/scss/components/StackTrace.scss @@ -62,7 +62,7 @@ } &.highlighted-line { - background-color: $tt-medium-blue; + background-color: $tt-slate; .line-number { color: $tt-medium-light-gray; From ed80a5f9dffc8e8462a083dc58845a4a6c4d0440 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Fri, 23 Aug 2024 14:56:41 -0400 Subject: [PATCH 07/14] Moved route styling into its own folder --- src/routes/Home.tsx | 2 +- src/scss/routes/Home.scss | 21 +++++++++++++++++++++ src/scss/routes/Styleguide.scss | 14 ++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 src/scss/routes/Home.scss create mode 100644 src/scss/routes/Styleguide.scss diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 23420acd..e28b67b6 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -6,7 +6,7 @@ import { Icon } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import LocalFolderSelector from '../components/report-selection/LocalFolderSelector'; import RemoteSyncConfigurator from '../components/report-selection/RemoteSyncConfigurator'; -import 'styles/components/Home.scss'; +import 'styles/routes/Home.scss'; function Home() { return ( diff --git a/src/scss/routes/Home.scss b/src/scss/routes/Home.scss new file mode 100644 index 00000000..c13045a2 --- /dev/null +++ b/src/scss/routes/Home.scss @@ -0,0 +1,21 @@ +// Rough placeholder styles for demoing home screen + +@use '../definitions/colours' as *; + +.home { + display: flex; + place-content: center center; + margin-top: 100px; + + h3 { + margin: 0; + } + + .bp5-button { + margin: 0; + } + + .bp5-file-input { + max-width: 265px; + } +} diff --git a/src/scss/routes/Styleguide.scss b/src/scss/routes/Styleguide.scss new file mode 100644 index 00000000..9703ed32 --- /dev/null +++ b/src/scss/routes/Styleguide.scss @@ -0,0 +1,14 @@ +.container { + margin-bottom: 20px; + +} + +.flex { + display: flex; + gap: 10px; +} + +.short-width { + width: 270px; +} + From 31d848278630ef10378479750124b3c81bd78ca0 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Fri, 23 Aug 2024 14:57:52 -0400 Subject: [PATCH 08/14] Fixed issue with progress bar outputting a 0 --- src/components/ProgressBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 6a548e12..306eabdc 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -5,13 +5,13 @@ import { UploadProgress } from '../hooks/useLocal'; function ProgressBar({ progress, estimated }: UploadProgress) { return (
- {progress && estimated && ( + {progress && estimated ? ( {progress > 0 ? `${Math.round(progress * 100)}%` : `100%`} {` - `} {estimated > 0 ? `${Math.round(estimated)}s left` : '0s left'} - )} + ) : null}
From 878f74b2f3889da87508ca15cfde8f820813da5e Mon Sep 17 00:00:00 2001 From: David Blundell Date: Fri, 23 Aug 2024 15:01:29 -0400 Subject: [PATCH 09/14] Reorganised styleguide --- src/routes/Styleguide.tsx | 217 +++++++++++++++++++-------- src/scss/components/Home.scss | 21 --- src/scss/components/SearchField.scss | 1 - 3 files changed, 152 insertions(+), 87 deletions(-) delete mode 100644 src/scss/components/Home.scss diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx index a12c809c..af45e1bf 100644 --- a/src/routes/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -1,21 +1,37 @@ +/* eslint-disable react/jsx-props-no-spreading */ // SPDX-License-Identifier: Apache-2.0 // // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC -import { Button, ButtonGroup, FormGroup, Intent, PopoverPosition, Switch, Tooltip } from '@blueprintjs/core'; +import { + Button, + ButtonGroup, + FormGroup, + InputGroup, + Intent, + PopoverPosition, + Switch, + Tooltip, +} from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import { Helmet } from 'react-helmet-async'; import ConnectionTestMessage from '../components/report-selection/ConnectionTestMessage'; import { ConnectionTestStates } from '../definitions/ConnectionStatus'; import ProgressBar from '../components/ProgressBar'; import SearchField from '../components/SearchField'; +import 'styles/routes/Styleguide.scss'; + +const FORM_GROUP = { + label: 'Form label', + subLabel: 'Sub label here', +}; export default function Operations() { return ( <> -

Typography

+ {/*

Typography

Font family @@ -45,65 +61,11 @@ export default function Operations() { Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nemo velit molestias quae temporibus sint in at consectetur voluptatem obcaecati, saepe, ratione, reprehenderit perferendis quas explicabo error repellendus deserunt? Optio! -

+

*/}

Buttons

- -
+

Form elements

- - {}} + + {}} + leftIcon={IconNames.FOLDER_NEW} /> +
+ {}} + intent={Intent.PRIMARY} + leftIcon={IconNames.FOLDER_NEW} + /> + + {}} + intent={Intent.WARNING} + leftIcon={IconNames.FOLDER_NEW} + /> + + {}} + intent={Intent.SUCCESS} + leftIcon={IconNames.FOLDER_NEW} + /> + + {}} + intent={Intent.DANGER} + leftIcon={IconNames.FOLDER_NEW} + /> +
+ +
+ + {}} + /> + +
+ + + +

Status

Progress bar

-
+
+
+ +
+ +
+ +
+

Connection message

Date: Tue, 27 Aug 2024 09:47:01 -0400 Subject: [PATCH 10/14] Colours updated --- src/routes/Styleguide.tsx | 68 ++++++++++++------- src/scss/_blueprintjs.scss | 2 +- src/scss/components/OperationArguments.scss | 3 +- .../components/RemoteConnectionDialog.scss | 4 +- src/scss/definitions/_colours.scss | 1 - src/scss/routes/Styleguide.scss | 56 ++++++++++++++- 6 files changed, 105 insertions(+), 29 deletions(-) diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx index af45e1bf..01225d50 100644 --- a/src/routes/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -20,6 +20,7 @@ import { ConnectionTestStates } from '../definitions/ConnectionStatus'; import ProgressBar from '../components/ProgressBar'; import SearchField from '../components/SearchField'; import 'styles/routes/Styleguide.scss'; +import LoadingSpinner from '../components/LoadingSpinner'; const FORM_GROUP = { label: 'Form label', @@ -63,6 +64,23 @@ export default function Operations() { error repellendus deserunt? Optio!

*/} +

Colours

+ +

Background

+
+
+
+
+ +

Greys

+
+
+
+
+
+
+
+

Buttons

@@ -456,7 +474,6 @@ export default function Operations() { > {}} leftIcon={IconNames.FOLDER_NEW} /> @@ -465,7 +482,6 @@ export default function Operations() {
{}} intent={Intent.PRIMARY} leftIcon={IconNames.FOLDER_NEW} @@ -473,7 +489,6 @@ export default function Operations() { {}} intent={Intent.WARNING} leftIcon={IconNames.FOLDER_NEW} @@ -481,7 +496,6 @@ export default function Operations() { {}} intent={Intent.SUCCESS} leftIcon={IconNames.FOLDER_NEW} @@ -489,7 +503,6 @@ export default function Operations() { {}} intent={Intent.DANGER} leftIcon={IconNames.FOLDER_NEW} @@ -524,6 +537,7 @@ export default function Operations() { {}} checked /> @@ -553,24 +567,32 @@ export default function Operations() { />
-

Connection message

- - - - - +
+

Connection message

+ + + + + +
+ +
+

Loading spinner

+ + +
); } diff --git a/src/scss/_blueprintjs.scss b/src/scss/_blueprintjs.scss index 6e53eb08..425f3ace 100644 --- a/src/scss/_blueprintjs.scss +++ b/src/scss/_blueprintjs.scss @@ -57,7 +57,7 @@ &.bp5-minimal { background-color: transparent !important; - color: $tt-slate-tint-1 !important; + color: $tt-slate-tint-2 !important; &:hover { background-color: rgba($tt-slate, 20%) !important; diff --git a/src/scss/components/OperationArguments.scss b/src/scss/components/OperationArguments.scss index 46a6d888..ac6c3c29 100644 --- a/src/scss/components/OperationArguments.scss +++ b/src/scss/components/OperationArguments.scss @@ -2,6 +2,7 @@ // // SPDX-FileCopyrightText: © 2024 Tenstorrent Inc. +@use 'sass:color'; @use '../definitions/colours' as *; .arguments-table { @@ -17,7 +18,7 @@ } tr { - background-color: $tt-slight-off-background; + background-color: color.adjust($tt-off-background, $lightness: -5%); &:nth-of-type(odd) { background-color: $tt-off-background; diff --git a/src/scss/components/RemoteConnectionDialog.scss b/src/scss/components/RemoteConnectionDialog.scss index 0619a04b..3a7a57f3 100644 --- a/src/scss/components/RemoteConnectionDialog.scss +++ b/src/scss/components/RemoteConnectionDialog.scss @@ -7,7 +7,7 @@ $tt-pending: #ffd500; .bp5-dialog.remote-connection-dialog { - background-color: $tt-slight-off-background; + background-color: $tt-off-background; .bp5-dialog-header { background-color: $tt-off-background; @@ -41,7 +41,7 @@ $tt-pending: #ffd500; color: $tt-pending; } - &.status-failed .connection-status-icon { color: $tt-error; } + // &.status-failed .connection-status-icon { color: $tt-error; } } @keyframes connection-test-progress { diff --git a/src/scss/definitions/_colours.scss b/src/scss/definitions/_colours.scss index 62a9c605..a2f9d0f0 100644 --- a/src/scss/definitions/_colours.scss +++ b/src/scss/definitions/_colours.scss @@ -6,7 +6,6 @@ $tt-purple: #786bb0; $tt-background: #33333d; $tt-off-background: #44444d; -$tt-slight-off-background: #383840; $tt-very-dark-gray: #1c2127; $tt-light-gray: #eeeee6; $tt-medium-light-gray: #cbcbcb; diff --git a/src/scss/routes/Styleguide.scss b/src/scss/routes/Styleguide.scss index 9703ed32..6e3e084a 100644 --- a/src/scss/routes/Styleguide.scss +++ b/src/scss/routes/Styleguide.scss @@ -1,14 +1,68 @@ +// SPDX-License-Identifier: Apache-2.0 +// +// SPDX-FileCopyrightText: © 2024 Tenstorrent Inc. + +@use '../definitions/colours' as *; + .container { margin-bottom: 20px; - } .flex { display: flex; gap: 10px; + + &.no-gap { + gap: 0 + } + + &.no-wrap { + flex-wrap: nowrap; + } } .short-width { width: 270px; } +.colour { + height: 30px; + width: 160px; + border: 1px solid $tt-white; + + &:first-child { + border-left-width: 2px; + } + + &:last-child { + border-right-width: 2px; + } + + &.grey-1 { + background: $tt-background; + } + + &.grey-2 { + background: $tt-off-background; + } + + &.grey-4 { + background: $tt-very-dark-gray; + } + + &.grey-5 { + background: $tt-dark-gray; + } + + &.grey-6 { + background: $tt-medium-gray; + } + + &.grey-7 { + background: $tt-medium-light-gray; + } + + &.grey-8 { + background: $tt-light-gray; + } +} From d037d77b6241385491f357df0f9c5a77f0b22c5d Mon Sep 17 00:00:00 2001 From: David Blundell Date: Tue, 27 Aug 2024 16:34:43 -0400 Subject: [PATCH 11/14] Did a 'grey' pass --- .../OperationDetailsComponent.tsx | 36 +++++++---- src/routes/Styleguide.tsx | 35 ++++++----- src/scss/_base.scss | 15 ++++- src/scss/_blueprintjs.scss | 31 +++------ src/scss/components/FolderPicker.scss | 6 +- src/scss/components/LoadingSpinner.scss | 3 +- src/scss/components/OperationArguments.scss | 7 ++- .../components/OperationDetailsComponent.scss | 35 ++--------- .../components/RemoteConnectionDialog.scss | 22 +++---- src/scss/components/SearchField.scss | 2 +- src/scss/components/StackTrace.scss | 8 +-- src/scss/definitions/_colours.scss | 24 +++---- src/scss/routes/Styleguide.scss | 63 ++++++++++--------- 13 files changed, 138 insertions(+), 149 deletions(-) diff --git a/src/components/operation-details/OperationDetailsComponent.tsx b/src/components/operation-details/OperationDetailsComponent.tsx index 3ec749ba..a01c9fec 100644 --- a/src/components/operation-details/OperationDetailsComponent.tsx +++ b/src/components/operation-details/OperationDetailsComponent.tsx @@ -361,12 +361,18 @@ const OperationDetailsComponent: React.FC = ({ operationI key={op.id} className='operation-link' > - - {op.id} {op.name} - + {operationId === op.id ? ( + + {op.id} {op.name} + + ) : ( + + {op.id} {op.name} + + )}
))} @@ -388,12 +394,18 @@ const OperationDetailsComponent: React.FC = ({ operationI key={op.id} className='operation-link' > - - {op.id} {op.name} - + {operationId === op.id ? ( + + {op.id} {op.name} + + ) : ( + + {op.id} {op.name} + + )}
))}
diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx index 01225d50..975f2c31 100644 --- a/src/routes/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -32,7 +32,8 @@ export default function Operations() { <> - {/*

Typography

+

Typography

+ {/*

Font family @@ -44,15 +45,16 @@ export default function Operations() {

Heading H2

Heading H3

Heading H4

-
Heading H5
+
Heading H5
*/}

Paragraph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laborum atque suscipit. Officiis - fugit necessitatibus libero perspiciatis sequi accusantium earum repudiandae deserunt - nemo, voluptatem tempora laborum eaque minima molestiae eveniet. + fugit necessitatibus libero perspiciatis sequi accusantium earum{' '} + repudiandae deserunt nemo, voluptatem tempora laborum eaque minima molestiae + eveniet.

@@ -62,23 +64,22 @@ export default function Operations() { Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nemo velit molestias quae temporibus sint in at consectetur voluptatem obcaecati, saepe, ratione, reprehenderit perferendis quas explicabo error repellendus deserunt? Optio! -

*/} +

Colours

-

Background

-
-
-
-
-

Greys

-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+

Buttons

diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 76e5940e..d5411fab 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -37,6 +37,19 @@ button { hr { border: none; - border-bottom: 1px solid $tt-medium-gray; + border-bottom: 1px solid $tt-grey-5; margin: 0; } + +a { + text-decoration: underline; + + &:focus { + text-decoration: none; + outline: none; + } + + &:hover { + text-decoration: none; + } +} diff --git a/src/scss/_blueprintjs.scss b/src/scss/_blueprintjs.scss index 425f3ace..23f143b1 100644 --- a/src/scss/_blueprintjs.scss +++ b/src/scss/_blueprintjs.scss @@ -9,9 +9,10 @@ // $dark-button-background-color-hover: color.adjust($tt-slate, $lightness: -5%), // $dark-minimal-button-background-color-hover: rgba($tt-purple-accent, 20%), // $pt-dark-text-color - $control-checked-background-color: $tt-purple-accent, - $control-checked-background-color-hover: color.adjust($tt-purple-accent, $lightness: -3%), - $control-checked-background-color-active: color.adjust($tt-purple-accent, $lightness: -6%), + $pt-dark-link-color: $tt-teal-accent, + $control-checked-background-color: $tt-teal-accent, + $control-checked-background-color-hover: color.adjust($tt-teal-accent, $lightness: -3%), + $control-checked-background-color-active: color.adjust($tt-teal-accent, $lightness: -6%), $dark-progress-track-color: $tt-teal-shade, $dark-progress-head-color: $tt-teal-accent, // $dark-control-checked-background-color: #abc123, @@ -45,10 +46,10 @@ // Default .btn-default { - background-color: $tt-slate !important; + background-color: $tt-sand-shade !important; &:hover { - background-color: color.adjust($tt-slate, $lightness: -5%) !important; + background-color: color.adjust($tt-sand-shade, $lightness: -5%) !important; } .bp5-icon { @@ -67,32 +68,27 @@ // Primary .btn { - background-color: #2d72d2; - background-color: $tt-purple-shade !important; + background-color: $tt-teal-shade !important; &:hover { - // background-color: #2d72d2; - background-color: color.adjust($tt-purple-shade, $lightness: -5%) !important; + background-color: color.adjust($tt-teal-shade, $lightness: -5%) !important; } &.bp5-minimal { background-color: transparent !important; - color: $tt-purple !important; + color: $tt-teal !important; &:hover { - // background-color: rgb(45 114 210 / 20%); - background-color: rgba($tt-purple-accent, 20%) !important; + background-color: rgba($tt-teal-accent, 20%) !important; } } } // Success .btn-success { - background-color: #cd4246; background-color: $tt-green-accent !important; &:hover { - background-color: #ac2f33; background-color: color.adjust($tt-green-accent, $lightness: -5%) !important; } @@ -101,7 +97,6 @@ color: $tt-green-tint-1 !important; &:hover { - // background-color: rgb(45 114 210 / 20%); background-color: rgba($tt-green-accent, 20%) !important; } } @@ -109,11 +104,9 @@ // Warning .btn-warning { - background-color: #cd4246; background-color: $tt-yellow !important; &:hover { - background-color: #ac2f33; background-color: color.adjust($tt-yellow, $lightness: -5%) !important; } @@ -122,7 +115,6 @@ color: $tt-yellow-tint-1 !important; &:hover { - // background-color: rgb(45 114 210 / 20%); background-color: rgba($tt-yellow, 20%) !important; } } @@ -130,11 +122,9 @@ // Danger .btn-error { - background-color: #cd4246; background-color: $tt-red-accent !important; &:hover { - background-color: #ac2f33; background-color: color.adjust($tt-red-accent, $lightness: -5%) !important; } @@ -143,7 +133,6 @@ color: $tt-red !important; &:hover { - // background-color: rgb(45 114 210 / 20%); background-color: rgba($tt-red-accent, 20%) !important; } } diff --git a/src/scss/components/FolderPicker.scss b/src/scss/components/FolderPicker.scss index 1e7aaa7e..f2e148c8 100644 --- a/src/scss/components/FolderPicker.scss +++ b/src/scss/components/FolderPicker.scss @@ -16,7 +16,7 @@ gap: 20px; fieldset { - border: solid 1px $tt-medium-gray; + border: solid 1px $tt-grey-5; border-radius: 5px; padding: 5px 20px 10px; display: flex; @@ -29,7 +29,7 @@ width: 35vw; & > .bp5-icon { - color: $tt-dark-gray; + color: $tt-grey-4 } .folder-picker-wrapper { @@ -53,7 +53,7 @@ white-space: nowrap; } - .bp5-form-group-sub-label { color: $tt-light-gray; } + .bp5-form-group-sub-label { color: $tt-grey-7; } } legend { diff --git a/src/scss/components/LoadingSpinner.scss b/src/scss/components/LoadingSpinner.scss index 4c4e58a6..63397a64 100644 --- a/src/scss/components/LoadingSpinner.scss +++ b/src/scss/components/LoadingSpinner.scss @@ -11,7 +11,6 @@ $base-div-size: 13.3333px; position: relative; width: 80px; height: 80px; - color: $tt-medium-light-gray; div { position: absolute; @@ -19,7 +18,7 @@ $base-div-size: 13.3333px; width: $base-div-size; height: $base-div-size; border-radius: 50%; - background-color: $tt-light-gray; + background-color: $tt-white; animation-timing-function: cubic-bezier(0, 1, 1, 0); &:nth-child(1) { diff --git a/src/scss/components/OperationArguments.scss b/src/scss/components/OperationArguments.scss index ac6c3c29..bd378d72 100644 --- a/src/scss/components/OperationArguments.scss +++ b/src/scss/components/OperationArguments.scss @@ -5,6 +5,8 @@ @use 'sass:color'; @use '../definitions/colours' as *; +$row-background: $tt-grey-2; + .arguments-table { border-collapse: collapse; width: 100%; @@ -18,10 +20,11 @@ } tr { - background-color: color.adjust($tt-off-background, $lightness: -5%); + background-color: color.adjust($row-background, $lightness: 2%); &:nth-of-type(odd) { - background-color: $tt-off-background; + background-color: color.adjust($row-background, $lightness: 8%); + } th { diff --git a/src/scss/components/OperationDetailsComponent.scss b/src/scss/components/OperationDetailsComponent.scss index a75af7d2..b4939e5e 100644 --- a/src/scss/components/OperationDetailsComponent.scss +++ b/src/scss/components/OperationDetailsComponent.scss @@ -4,40 +4,17 @@ @use '../definitions/colours' as *; -$link-color: #99c4ff; - .operation-details-component { - a, - a:active, - a:visited { - color: $link-color; - margin: 0; - padding: 2px 0; - transition: - color 150ms linear, - background-color 150ms linear; - transition-delay: 10ms; - - &.current { - color: $tt-white; - cursor: default; + .selected-tensor { + color: $tt-white; - &::before { - display: inline-block; - content: '\2714'; // checkmark - margin-right: 5px; - } + &::before { + display: inline-block; + content: '\2714'; // checkmark + margin-right: 5px; } } - a:hover:not(.current) { - color: $tt-black; - background-color: $link-color; - transition: - color 0ms linear, - background-color 0ms linear; - } - .dram-memory-renderer, .l1-memory-renderer { .memory-plot { diff --git a/src/scss/components/RemoteConnectionDialog.scss b/src/scss/components/RemoteConnectionDialog.scss index 3a7a57f3..c0aab187 100644 --- a/src/scss/components/RemoteConnectionDialog.scss +++ b/src/scss/components/RemoteConnectionDialog.scss @@ -4,23 +4,23 @@ @use "../definitions/colours" as *; -$tt-pending: #ffd500; +$tt-pending: $tt-yellow; .bp5-dialog.remote-connection-dialog { - background-color: $tt-off-background; + background-color: $tt-grey-3; .bp5-dialog-header { - background-color: $tt-off-background; + background-color: $tt-grey-2; .bp5-icon, .bp5-heading { - color: $tt-light-gray; + color: $tt-grey-7; } } - .bp5-form-group-sub-label { color: $tt-light-gray; } + .bp5-form-group-sub-label { color: $tt-grey-7 } fieldset { - border: solid 1px $tt-medium-gray; + border: solid 1px $tt-grey-5; border-radius: 5px; } } @@ -34,17 +34,15 @@ $tt-pending: #ffd500; animation: 0.7s steps(2) infinite alternate both; } - &.status-idle .connection-status-icon { color: $tt-medium-gray; } + &.status-idle .connection-status-icon { color: $tt-grey-5; } &.status-progress .connection-status-icon { animation-name: connection-test-progress; - color: $tt-pending; + color: $tt-yellow; } - - // &.status-failed .connection-status-icon { color: $tt-error; } } @keyframes connection-test-progress { - from { color: $tt-medium-gray; } - to { color: $tt-pending; } + from { color: $tt-grey-5; } + to { color: $tt-yellow; } } diff --git a/src/scss/components/SearchField.scss b/src/scss/components/SearchField.scss index 47663fe1..5aaf1edb 100644 --- a/src/scss/components/SearchField.scss +++ b/src/scss/components/SearchField.scss @@ -15,7 +15,7 @@ margin-right: 5px; svg { - fill: $tt-dark-gray; + fill: $tt-grey-5; } } } diff --git a/src/scss/components/StackTrace.scss b/src/scss/components/StackTrace.scss index 9bca99b7..ac928711 100644 --- a/src/scss/components/StackTrace.scss +++ b/src/scss/components/StackTrace.scss @@ -6,7 +6,7 @@ flex-wrap: nowrap; padding: 10px; padding-left: 0; - background: $tt-very-dark-gray; + background-color: $tt-black; align-items: flex-start; gap: 10px; margin-top: 0; @@ -48,13 +48,13 @@ left: 5px; min-width: 30px; font-size: 1em; - color: $tt-medium-gray; + color: $tt-grey-5; } &::before { content: ''; display: block; - border-left: 1px solid $tt-medium-light-gray; + border-left: 1px solid $tt-grey-4; width: 1px; height: 100%; position: absolute; @@ -65,7 +65,7 @@ background-color: $tt-slate; .line-number { - color: $tt-medium-light-gray; + color: $tt-grey-7; } } } diff --git a/src/scss/definitions/_colours.scss b/src/scss/definitions/_colours.scss index a2f9d0f0..32f87e70 100644 --- a/src/scss/definitions/_colours.scss +++ b/src/scss/definitions/_colours.scss @@ -2,19 +2,15 @@ // // SPDX-FileCopyrightText: © 2024 Tenstorrent Inc. -/* Tenstorrent powerpoint theme */ -$tt-purple: #786bb0; -$tt-background: #33333d; -$tt-off-background: #44444d; -$tt-very-dark-gray: #1c2127; -$tt-light-gray: #eeeee6; -$tt-medium-light-gray: #cbcbcb; -$tt-medium-gray: #909096; -$tt-dark-gray: #606066; - -// New colours -$tt-white: #fff; +// New Greys $tt-black: #202020; +$tt-grey-2: #343434; +$tt-grey-3: #464646; +$tt-grey-4: #575757; +$tt-grey-5: #A7AFB6; +$tt-grey-6: #CED4DA; +$tt-grey-7: #DEE2E6; +$tt-white: #fff; // tt-purple $tt-purple: #bcb3f7; @@ -72,5 +68,5 @@ $tt-slate-tint-2: #edeff9; $tt-slate-accent: #606891; $tt-slate-shade: #101636; -// States -$tt-error: #ff3c00; +// Shared variables +$tt-background: $tt-grey-2; diff --git a/src/scss/routes/Styleguide.scss b/src/scss/routes/Styleguide.scss index 6e3e084a..a77334e7 100644 --- a/src/scss/routes/Styleguide.scss +++ b/src/scss/routes/Styleguide.scss @@ -19,50 +19,51 @@ &.no-wrap { flex-wrap: nowrap; } + + &.flex-column { + flex-direction: column; + } } .short-width { width: 270px; } -.colour { - height: 30px; - width: 160px; - border: 1px solid $tt-white; +.colour-container { + .colour { + height: 30px; + width: 160px; - &:first-child { - border-left-width: 2px; - } + &.g-2 { + background-color: $tt-grey-2; + } - &:last-child { - border-right-width: 2px; - } + &.g-3 { + background-color: $tt-grey-3; + } - &.grey-1 { - background: $tt-background; - } + &.g-4 { + background-color: $tt-grey-4; + } - &.grey-2 { - background: $tt-off-background; - } + &.g-5 { + background-color: $tt-grey-5; + } - &.grey-4 { - background: $tt-very-dark-gray; - } + &.g-6 { + background-color: $tt-grey-6; + } - &.grey-5 { - background: $tt-dark-gray; - } + &.g-7 { + background-color: $tt-grey-7; + } - &.grey-6 { - background: $tt-medium-gray; - } - - &.grey-7 { - background: $tt-medium-light-gray; - } + &.b-1 { + background-color: $tt-black; + } - &.grey-8 { - background: $tt-light-gray; + &.w-1 { + background-color: $tt-white; + } } } From 41034aa04666191dcbbda465ea400c19efeb3ff6 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Wed, 28 Aug 2024 10:40:44 -0400 Subject: [PATCH 12/14] Generating colour classes for styleguide --- src/routes/Styleguide.tsx | 133 +++++++++++++++++++++++------ src/scss/_blueprintjs.scss | 7 +- src/scss/components/Operation.scss | 4 + src/scss/definitions/_colours.scss | 58 +++++++++++++ src/scss/routes/Styleguide.scss | 33 +++++-- 5 files changed, 199 insertions(+), 36 deletions(-) diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx index 975f2c31..995d8ef5 100644 --- a/src/routes/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -47,38 +47,119 @@ export default function Operations() {

Heading H4

Heading H5
*/} -

- Paragraph -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laborum atque suscipit. Officiis - fugit necessitatibus libero perspiciatis sequi accusantium earum{' '} - repudiandae deserunt nemo, voluptatem tempora laborum eaque minima molestiae - eveniet. -

- -

- Monospace -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nemo velit molestias quae temporibus - sint in at consectetur voluptatem obcaecati, saepe, ratione, reprehenderit perferendis quas explicabo - error repellendus deserunt? Optio! -

+
+

+ Paragraph +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laborum atque suscipit. + Officiis fugit necessitatibus libero perspiciatis sequi accusantium earum{' '} + repudiandae deserunt nemo, voluptatem tempora laborum eaque minima + molestiae eveniet. +

+ +

+ Monospace +

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nemo velit molestias quae temporibus + sint in at consectetur voluptatem obcaecati, saepe, ratione, reprehenderit perferendis quas + explicabo error repellendus deserunt? Optio! +

+ +

+ Horizontal ruler +

+
+

Colours

Greys

-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ +
+
+

Purple

+
+
+
+
+
+
+ +
+

Red

+
+
+
+
+
+
+ +
+

Blue

+
+
+
+
+
+
+ +
+

Yellow

+
+
+
+
+
+
+ +
+

Teal

+
+
+
+
+
+
+ +
+

Green

+
+
+
+
+
+
+ +
+

Sand

+
+
+
+
+
+
+ +
+

Slate

+
+
+
+
+
@@ -543,7 +624,7 @@ export default function Operations() { /> -

Status

+

Components

Progress bar

diff --git a/src/scss/_blueprintjs.scss b/src/scss/_blueprintjs.scss index 23f143b1..e4aa7111 100644 --- a/src/scss/_blueprintjs.scss +++ b/src/scss/_blueprintjs.scss @@ -5,9 +5,10 @@ @use 'sass:color'; @use './definitions/colours' as *; @use "@blueprintjs/core/src/blueprint.scss" with ( - // $dark-button-background-color: $tt-slate, - // $dark-button-background-color-hover: color.adjust($tt-slate, $lightness: -5%), - // $dark-minimal-button-background-color-hover: rgba($tt-purple-accent, 20%), + // $dark-button-background-color: $tt-sand-shade, + // $dark-button-background-color-hover: color.adjust($tt-sand-shade, $lightness: -5%), + // $dark-minimal-button-background-color: $tt-sand-shade, + // $dark-minimal-button-background-color-hover: color.adjust($tt-sand-shade, $lightness: 5%), // $pt-dark-text-color $pt-dark-link-color: $tt-teal-accent, $control-checked-background-color: $tt-teal-accent, diff --git a/src/scss/components/Operation.scss b/src/scss/components/Operation.scss index a09cf483..e88e919c 100644 --- a/src/scss/components/Operation.scss +++ b/src/scss/components/Operation.scss @@ -17,5 +17,9 @@ .highlighted-text { color: $tt-white; font-size: 20px; + + mark { + background-color: $tt-yellow; + } } } diff --git a/src/scss/definitions/_colours.scss b/src/scss/definitions/_colours.scss index 32f87e70..7dfb3d1b 100644 --- a/src/scss/definitions/_colours.scss +++ b/src/scss/definitions/_colours.scss @@ -70,3 +70,61 @@ $tt-slate-shade: #101636; // Shared variables $tt-background: $tt-grey-2; +$tt-colours: ( + "purple": ( + "base": $tt-purple, + "tint-1": $tt-purple-tint-1, + "tint-2": $tt-purple-tint-2, + "accent": $tt-purple-accent, + "shade": $tt-purple-shade, + ), + "red": ( + "base": $tt-red, + "tint-1": $tt-red-tint-1, + "tint-2": $tt-red-tint-2, + "accent": $tt-red-accent, + "shade": $tt-red-shade, + ), + "blue": ( + "base": $tt-blue, + "tint-1": $tt-blue-tint-1, + "tint-2": $tt-blue-tint-2, + "accent": $tt-blue-accent, + "shade": $tt-blue-shade, + ), + "yellow": ( + "base": $tt-yellow, + "tint-1": $tt-yellow-tint-1, + "tint-2": $tt-yellow-tint-2, + "accent": $tt-yellow-accent, + "shade": $tt-yellow-shade, + ), + "teal": ( + "base": $tt-teal, + "tint-1": $tt-teal-tint-1, + "tint-2": $tt-teal-tint-2, + "accent": $tt-teal-accent, + "shade": $tt-teal-shade, + ), + "green": ( + "base": $tt-green, + "tint-1": $tt-green-tint-1, + "tint-2": $tt-green-tint-2, + "accent": $tt-green-accent, + "shade": $tt-green-shade, + ), + "sand": ( + "base": $tt-sand, + "tint-1": $tt-sand-tint-1, + "tint-2": $tt-sand-tint-2, + "accent": $tt-sand-accent, + "shade": $tt-sand-shade, + ), + "slate": ( + "base": $tt-slate, + "tint-1": $tt-slate-tint-1, + "tint-2": $tt-slate-tint-2, + "accent": $tt-slate-accent, + "shade": $tt-slate-shade, + ) +); diff --git a/src/scss/routes/Styleguide.scss b/src/scss/routes/Styleguide.scss index a77334e7..d74e82c7 100644 --- a/src/scss/routes/Styleguide.scss +++ b/src/scss/routes/Styleguide.scss @@ -16,6 +16,10 @@ gap: 0 } + &.wrap { + flex-wrap: wrap; + } + &.no-wrap { flex-wrap: nowrap; } @@ -30,31 +34,32 @@ } .colour-container { + flex-basis: 24%; + .colour { height: 30px; - width: 160px; - &.g-2 { + &.g-1 { background-color: $tt-grey-2; } - &.g-3 { + &.g-2 { background-color: $tt-grey-3; } - &.g-4 { + &.g-3 { background-color: $tt-grey-4; } - &.g-5 { + &.g-4 { background-color: $tt-grey-5; } - &.g-6 { + &.g-5 { background-color: $tt-grey-6; } - &.g-7 { + &.g-6 { background-color: $tt-grey-7; } @@ -65,5 +70,19 @@ &.w-1 { background-color: $tt-white; } + + @each $colour-name, $shades in $tt-colours { + @each $shade-name, $shade-value in $shades { + &.#{$colour-name}-#{$shade-name} { + background-color: $shade-value; + } + } + } } } + +@function clr($base, $shade: base) { + $color: map.get(map.get($colors, $base), $shade); + + @return $color; + } From 1ae93aadb90ce60c08a6ea4309fac889d2fbe1af Mon Sep 17 00:00:00 2001 From: David Blundell Date: Wed, 28 Aug 2024 10:41:07 -0400 Subject: [PATCH 13/14] Removed unused function --- src/scss/routes/Styleguide.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/scss/routes/Styleguide.scss b/src/scss/routes/Styleguide.scss index d74e82c7..bb9df921 100644 --- a/src/scss/routes/Styleguide.scss +++ b/src/scss/routes/Styleguide.scss @@ -80,9 +80,3 @@ } } } - -@function clr($base, $shade: base) { - $color: map.get(map.get($colors, $base), $shade); - - @return $color; - } From 565c33c86dca473fca1821c54c9adaaac7c3a0ef Mon Sep 17 00:00:00 2001 From: David Blundell Date: Fri, 30 Aug 2024 15:29:15 -0400 Subject: [PATCH 14/14] Removed some dev code --- src/routes/Styleguide.tsx | 247 +------------------------------- src/scss/_blueprintjs.scss | 140 +++--------------- src/scss/routes/Styleguide.scss | 2 +- 3 files changed, 20 insertions(+), 369 deletions(-) diff --git a/src/routes/Styleguide.tsx b/src/routes/Styleguide.tsx index 995d8ef5..85e2733f 100644 --- a/src/routes/Styleguide.tsx +++ b/src/routes/Styleguide.tsx @@ -75,9 +75,9 @@ export default function Operations() {

Colours

-

Greys

-
+
+

Grey

@@ -87,9 +87,6 @@ export default function Operations() {
-
- -

Purple

@@ -176,54 +173,6 @@ export default function Operations() { > Your text here - - - -
@@ -242,54 +191,6 @@ export default function Operations() { > Your text here - - - -
@@ -308,54 +209,6 @@ export default function Operations() { > Your text here - - - -
@@ -374,54 +227,6 @@ export default function Operations() { > Your text here - - - -
@@ -440,54 +245,6 @@ export default function Operations() { > Your text here - - - -
diff --git a/src/scss/_blueprintjs.scss b/src/scss/_blueprintjs.scss index e4aa7111..6ed30b29 100644 --- a/src/scss/_blueprintjs.scss +++ b/src/scss/_blueprintjs.scss @@ -4,12 +4,12 @@ @use 'sass:color'; @use './definitions/colours' as *; +@use "@blueprintjs/colors/lib/scss/colors" as *; @use "@blueprintjs/core/src/blueprint.scss" with ( - // $dark-button-background-color: $tt-sand-shade, - // $dark-button-background-color-hover: color.adjust($tt-sand-shade, $lightness: -5%), - // $dark-minimal-button-background-color: $tt-sand-shade, - // $dark-minimal-button-background-color-hover: color.adjust($tt-sand-shade, $lightness: 5%), - // $pt-dark-text-color + $dark-button-background-color: $tt-sand-shade, + $dark-button-background-color-hover: color.adjust($tt-sand-shade, $lightness: -5%), + $dark-minimal-button-background-color: $tt-sand-shade, + $dark-minimal-button-background-color-hover: color.adjust($tt-sand-shade, $lightness: 5%), $pt-dark-link-color: $tt-teal-accent, $control-checked-background-color: $tt-teal-accent, $control-checked-background-color-hover: color.adjust($tt-teal-accent, $lightness: -3%), @@ -19,122 +19,16 @@ // $dark-control-checked-background-color: #abc123, $pt-dark-icon-color: $tt-white, // "intent": (default, hover, active colors) - // $button-intents: ( - // "primary": (#abc123, #abc123, #abc123), - // "success": (#abc123, #abc123, #abc123), - // "warning": (#abc123, #abc123, #abc123), - // "danger": (#abc123, #abc123, #abc123) - // ), - // $pt-intent-colors: ( - // "primary": $tt-purple, - // "success": red, - // "warning": red, - // "danger" : red, - // ), - // $pt-dark-intent-text-colors: ( - // "primary": $tt-purple-accent, - // "success": $tt-green-accent, - // "warning": $tt-yellow, - // "danger" : $tt-red, - // ), - // $pt-dark-input-intent-box-shadow-colors: ( - // "primary": #abc123, - // "success": #abc123, - // "warning": #abc123, - // "danger": #abc123, - // ) + $button-intents: ( + "primary": ($tt-teal-shade, color.adjust($tt-teal-shade, $lightness: -5%), color.adjust($tt-teal-shade, $lightness: -10%)), + "success": ($green3, $green2, $green1), + "warning": ($tt-yellow, color.adjust($tt-yellow, $lightness: -5%), $tt-yellow), + "danger": ($tt-red-accent, color.adjust($tt-red-accent, $lightness: -5%), $tt-red-shade) + ), + $pt-dark-intent-text-colors: ( + "primary": $tt-teal, + "success": $tt-green, + "warning": $tt-yellow, + "danger" : $tt-red, + ), ); - -// Default -.btn-default { - background-color: $tt-sand-shade !important; - - &:hover { - background-color: color.adjust($tt-sand-shade, $lightness: -5%) !important; - } - - .bp5-icon { - color: inherit !important; - } - - &.bp5-minimal { - background-color: transparent !important; - color: $tt-slate-tint-2 !important; - - &:hover { - background-color: rgba($tt-slate, 20%) !important; - } - } -} - -// Primary -.btn { - background-color: $tt-teal-shade !important; - - &:hover { - background-color: color.adjust($tt-teal-shade, $lightness: -5%) !important; - } - - &.bp5-minimal { - background-color: transparent !important; - color: $tt-teal !important; - - &:hover { - background-color: rgba($tt-teal-accent, 20%) !important; - } - } -} - -// Success -.btn-success { - background-color: $tt-green-accent !important; - - &:hover { - background-color: color.adjust($tt-green-accent, $lightness: -5%) !important; - } - - &.bp5-minimal { - background-color: transparent !important; - color: $tt-green-tint-1 !important; - - &:hover { - background-color: rgba($tt-green-accent, 20%) !important; - } - } -} - -// Warning -.btn-warning { - background-color: $tt-yellow !important; - - &:hover { - background-color: color.adjust($tt-yellow, $lightness: -5%) !important; - } - - &.bp5-minimal { - background-color: transparent !important; - color: $tt-yellow-tint-1 !important; - - &:hover { - background-color: rgba($tt-yellow, 20%) !important; - } - } -} - -// Danger -.btn-error { - background-color: $tt-red-accent !important; - - &:hover { - background-color: color.adjust($tt-red-accent, $lightness: -5%) !important; - } - - &.bp5-minimal { - background-color: transparent !important; - color: $tt-red !important; - - &:hover { - background-color: rgba($tt-red-accent, 20%) !important; - } - } -} diff --git a/src/scss/routes/Styleguide.scss b/src/scss/routes/Styleguide.scss index bb9df921..0d4bb616 100644 --- a/src/scss/routes/Styleguide.scss +++ b/src/scss/routes/Styleguide.scss @@ -34,7 +34,7 @@ } .colour-container { - flex-basis: 24%; + flex-basis: 10%; .colour { height: 30px;