Skip to content

Commit

Permalink
Set up design system theming
Browse files Browse the repository at this point in the history
  • Loading branch information
@edlu77
edlu77 committed Sep 27, 2024
1 parent fb919c2 commit 03d1f50
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 122 deletions.
164 changes: 82 additions & 82 deletions ...ui/src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,95 @@
@use 'sass:map';
@use '@angular/material' as mat;
@use '../../../styles/constants/palettes' as palettes;
@use '../../../styles/breakpoints' as breakpoints;

$gray-palette: map.get(palettes.$palettes, 'gray');
$blue-palette: map.get(palettes.$palettes, 'blue');

@mixin color($theme) {
cde-create-visualization-page {
h1,
h2,
h3,
h4 {
color: mat.get-theme-color($theme, accent, darker);
}

.page-nav .nav {
a {
color: mat.get-theme-color($theme, primary, 700);
}
// @use 'sass:map';
// @use '@angular/material' as mat;
// @use '../../../styles/constants/palettes' as palettes;
// @use '../../../styles/breakpoints' as breakpoints;

// $gray-palette: map.get(palettes.$palettes, 'gray');
// $blue-palette: map.get(palettes.$palettes, 'blue');

// @mixin color($theme) {
cde-create-visualization-page {
h1,
h2,
h3,
h4 {
// color: mat.get-theme-color($theme, accent, darker);
}

mat-icon,
span {
color: map.get($gray-palette, 700);
}
.page-nav .nav {
a {
color: var(--sys-on-background);
}

.card {
background-color: white;
mat-icon,
span {
// color: map.get($gray-palette, 700);
}
}

.header {
.step-number {
background-color: map.get($blue-palette, 800);
color: white;
}
.card {
background-color: white;

.use-template {
color: mat.get-theme-color($theme, primary, 700);
}
.header {
.step-number {
// background-color: map.get($blue-palette, 800);
color: white;
}
}

.data-upload {
td {
color: map.get($gray-palette, 700);
.use-template {
// color: mat.get-theme-color($theme, primary, 700);
}
}
}

.color-config {
mat-button-toggle-group {
border-color: map.get($gray-palette, 600);
--mat-standard-button-toggle-text-color: #{mat.get-theme-color($theme, accent, darker)};
--mat-standard-button-toggle-selected-state-background-color: rgb(
from #{mat.get-theme-color($theme, primary, 600)} r g b / 0.24
);
}
.data-upload {
td {
// color: map.get($gray-palette, 700);
}
}

mat-button-toggle {
&:first-child {
border-color: map.get($gray-palette, 600);
}
}
.color-config {
mat-button-toggle-group {
// border-color: map.get($gray-palette, 600);
// --mat-standard-button-toggle-text-color: #{mat.get-theme-color($theme, accent, darker)};
// --mat-standard-button-toggle-selected-state-background-color: rgb(
// from #{mat.get-theme-color($theme, primary, 600)} r g b / 0.24
// );
}

.use-template {
color: mat.get-theme-color($theme, primary, 700);
mat-button-toggle {
&:first-child {
// border-color: map.get($gray-palette, 600);
}
}

.metadata {
--mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
.use-template {
// color: mat.get-theme-color($theme, primary, 700);
}
}

.info-tooltip-panel {
background-color: white;
color: map.get($gray-palette, 600);
.metadata {
// --mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
}
}

mat-form-field {
--mdc-filled-text-field-container-color: #{map.get($blue-palette, 500)};
--mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($theme, primary, darker)};
--mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
--mat-select-enabled-arrow-color: #{map.get($gray-palette, 700)};
--mat-select-focused-arrow-color: #{mat.get-theme-color($theme, primary, darker)};
}
.info-tooltip-panel {
background-color: white;
// color: map.get($gray-palette, 600);
}

mat-form-field {
// --mdc-filled-text-field-container-color: #{map.get($blue-palette, 500)};
// --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($theme, primary, darker)};
// --mdc-filled-text-field-label-text-color: #{map.get($gray-palette, 700)};
// --mat-select-enabled-arrow-color: #{map.get($gray-palette, 700)};
// --mat-select-focused-arrow-color: #{mat.get-theme-color($theme, primary, darker)};
// }

.select-panel {
--mat-option-selected-state-layer-color: #{mat.get-theme-color($theme, accent, lighter)};
--mat-option-label-text-color: #{map.get($gray-palette, 700)};
--mat-option-selected-state-label-text-color: #{mat.get-theme-color($theme, accent, darker)};
--mat-minimal-pseudo-checkbox-selected-checkmark-color: #{mat.get-theme-color($theme, primary, 700)};
// --mat-option-selected-state-layer-color: #{mat.get-theme-color($theme, accent, lighter)};
// --mat-option-label-text-color: #{map.get($gray-palette, 700)};
// --mat-option-selected-state-label-text-color: #{mat.get-theme-color($theme, accent, darker)};
// --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{mat.get-theme-color($theme, primary, 700)};
}

.visualize-notification {
Expand All @@ -98,23 +98,23 @@ $blue-palette: map.get(palettes.$palettes, 'blue');

.upload-errors {
.error-message {
color: #{mat.get-theme-color($theme, primary, darker)};
// color: #{mat.get-theme-color($theme, primary, darker)};
}
.error-instructions {
color: #{map.get($gray-palette, 700)};
// color: #{map.get($gray-palette, 700)};
}
}
}
// }

@mixin typography($theme) {
}
// @mixin typography($theme) {
// }

@mixin theme($theme) {
@if mat.theme-has($theme, color) {
@include color($theme);
}
// @mixin theme($theme) {
// @if mat.theme-has($theme, color) {
// @include color($theme);
// }

@if mat.theme-has($theme, typography) {
@include typography($theme);
}
// @if mat.theme-has($theme, typography) {
// @include typography($theme);
// }
}
81 changes: 41 additions & 40 deletions apps/cde-ui/src/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
@use './styles/cta' as cta;
@use './styles/global/resets';
@use './styles/global/fonts';
@use './styles/material-theming';
// @use './styles/cta' as cta;
// @use './styles/global/resets';
// @use './styles/global/fonts';
// @use './styles/material-theming';
@use 'light-theme';
@use 'theming';
@use '../src/app/pages/create-visualization-page/create-visualization-page.component.theme.scss' as create-visualization;

@mixin theme($theme) {
@include create-visualization.theme($theme);
}

// TODO Update and switch to design system theming
// html {
// @include theming.theme(light-theme.$theme);
// }
// Only enabled for the footer at the moment
hra-footer {
html {
@include theming.theme(light-theme.$theme);
}

Expand All @@ -33,43 +34,43 @@ a {
text-decoration: none;
}

.cta-filled {
@include cta.filledDefault();
// .cta-filled {
// @include cta.filledDefault();

&:hover {
@include cta.filledHover();
}
// &:hover {
// @include cta.filledHover();
// }

&:active {
@include cta.filledActive();
}
// &:active {
// @include cta.filledActive();
// }

&:focus-visible {
--mdc-filled-button-label-text-color: rgba(32, 30, 61, 1);
color: var(--mdc-filled-button-label-text-color);
}
// &:focus-visible {
// --mdc-filled-button-label-text-color: rgba(32, 30, 61, 1);
// color: var(--mdc-filled-button-label-text-color);
// }

&:focus-visible::after {
@include cta.filledFocus();
}
}
// &:focus-visible::after {
// @include cta.filledFocus();
// }
// }

.cta-flat {
@include cta.flatDefault();
// .cta-flat {
// @include cta.flatDefault();

&:hover {
@include cta.flatHover();
}
// &:hover {
// @include cta.flatHover();
// }

&:active {
@include cta.flatActive();
}
// &:active {
// @include cta.flatActive();
// }

&:focus-visible {
@include cta.flatFocus();
}
}
// &:focus-visible {
// @include cta.flatFocus();
// }
// }

.selected {
box-shadow: 0 -2px 0 #e00d3a inset;
}
// .selected {
// box-shadow: 0 -2px 0 #e00d3a inset;
// }

0 comments on commit 03d1f50

Please sign in to comment.