Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

style(ui): remove all lagecy style sheets

Browse source 
remove all lagecy style sheets
This commit is contained in:
simeng-li 2022-10-23 15:05:48 +08:00
parent 565b944ae0
commit 07edd4e685
No known key found for this signature in database
GPG key ID: 14EA7BB1541E8075
4 changed files with 1 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/containers/AppContent/index.module.scss
View file

@ -1,6 +1,4 @@
@use '@/scss/underscore' as _;
@use '@/scss/mobile' as mobile;
@use '@/scss/desktop' as desktop;
@use '@/scss/colors' as colors;
@use '@/scss/fonts' as fonts;

2
packages/ui/src/hooks/use-preview.ts
View file

@ -3,7 +3,7 @@ import { conditionalString } from '@silverhand/essentials';
import { useEffect, useState } from 'react';
import * as styles from '@/containers/AppContent/index.module.scss';
import { Context } from '@/hooks/use-page-context';
import type { Context } from '@/hooks/use-page-context';
import initI18n from '@/i18n/init';
import { changeLanguage } from '@/i18n/utils';
import type { SignInExperienceSettings, PreviewConfig } from '@/types';

100
packages/ui/src/scss/_desktop.scss
View file

@ -1,100 +0,0 @@
/* Foundation */
$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
'Helvetica', 'Arial', sans-serif;
@mixin colors-light-theme {
--color-base: #e5e1ec;
--color-surface: #fff;
--color-surface-variant: #e5e1ec;
--color-text: #191c1d; // Neutral-10
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-border-variant: #c9c5d0;
--color-caption: #747778;
--color-icon: #747778;
--color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
--color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
--color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
--color-primary: var(--color-light-brand);
--color-focused-variant: var(--color-light-overlay-brand-focused);
--color-hover-variant: var(--color-light-overlay-brand-hover);
--color-pressed-variant: var(--color-light-overlay-brand-pressed);
--color-primary-pressed: var(--color-light-brand-pressed);
--color-primary-hover: var(--color-light-brand-hover);
--color-inverse-on-surface: #f3effa;
--color-outline: #78767f;
--color-layer: #eff1f1;
--color-dialogue: #fff;
--color-divider: #e0e3e3;
--color-error: #ba1b1b;
--color-loading-icon: #191c1d;
--color-inverse-social-bg: #000;
--color-inverse-social-hover: rgba(0, 0, 0, 92%);
--color-inverse-social-pressed: rgba(0, 0, 0, 88%);
}
@mixin colors-dark-theme {
--color-base: #2a2c32;
--color-surface: #191c1d;
--color-surface-variant: #47464e;
--color-text: #f7f8f8; // Neutral-10
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
--color-border-variant: #5f5d67;
--color-caption: #a9acac;
--color-icon: #a9acac;
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
--color-primary: var(--color-dark-brand);
--color-focused-variant: var(--color-dark-overlay-brand-focused);
--color-hover-variant: var(--color-dark-overlay-brand-hover);
--color-pressed-variant: var(--color-dark-overlay-brand-pressed);
--color-primary-pressed: var(--color-dark-brand-pressed);
--color-primary-hover: var(--color-dark-brand-hover);
--color-inverse-on-surface: #2d3132;
--color-outline: #928f9a;
--color-layer: #2a2c32;
--color-dialogue:
linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
#191c1d;
--color-divider: #444748;
--color-error: #dd3730;
--color-loading-icon: #f7f8f8;
--color-inverse-social-bg: #fff;
--color-inverse-social-hover: rgba(255, 255, 255, 92%);
--color-inverse-social-pressed: rgba(255, 255, 255, 88%);
}
@mixin colors-universal {
--color-primary-button-text: #fff;
--color-toast: #34353f;
--color-toast-border: #444748;
--color-overlay: rgba(0, 0, 0, 30%);
--color-loading-icon-light: #f7f8f8;
// shadows
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
}
@mixin fonts {
--font-title: 600 32px/40px #{$font-family};
--font-title-medium: 600 28px/36px #{$font-family};
--font-title-small: 600 16px/24px #{$font-family};
--font-header: 600 20px/28px #{$font-family};
--font-body-bold: 500 14px/20px #{$font-family};
--font-body: 400 14px/20px #{$font-family};
--font-caption: 400 14px/20px #{$font-family};
}
@mixin layout {
--radius: 8px;
--max-width: 400px;
}

68
packages/ui/src/scss/_mobile.scss
View file

@ -1,68 +0,0 @@
/* Foundation */
$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
'Helvetica', 'Arial', sans-serif;
@mixin colors-light-theme {
--color-base: #fff;
--color-surface: #fff;
--color-surface-variant: #e5e1ec;
--color-text: #191c1d;
--color-icon: #747778;
--color-caption: #747778;
--color-outline: #78767f;
--color-divider: #e0e3e3;
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-primary: var(--color-light-brand);
--color-layer: #eff1f1;
--color-error: #ba1b1b;
--color-dialogue: #fff;
--color-loading-icon: #191c1d;
--color-inverse-social-bg: #000;
}
@mixin colors-dark-theme {
--color-base: #191c1d;
--color-surface: #191c1d;
--color-surface-variant: #47464e;
--color-text: #f7f8f8;
--color-icon: #a9acac;
--color-caption: #a9acac;
--color-outline: #928f9a;
--color-divider: #444748;
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
--color-primary: var(--color-dark-brand);
--color-layer: #2a2c32;
--color-error: #dd3730;
--color-dialogue:
linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
#191c1d;
--color-loading-icon: #f7f8f8;
--color-inverse-social-bg: #fff;
}
@mixin colors-universal {
--color-primary-button-text: #fff;
--color-toast: #34353f;
--color-toast-border: #444748;
--color-overlay: rgba(0, 0, 0, 30%);
--color-loading-icon-light: #f7f8f8;
// shadows
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
}
@mixin fonts {
--font-title: 600 32px/40px #{$font-family};
--font-body-bold: 500 16px/20px #{$font-family};
--font-body: 400 16px/20px #{$font-family};
--font-caption: 400 14px/18px #{$font-family};
}
@mixin layout {
--radius: 8px;
--max-width: 360px;
}