Skip to content

Commit

Permalink
perf(token): update token per new theming #15
Browse files Browse the repository at this point in the history 
- fix the postCSS script to only use newest WC-standard
- remove unused npm packages
- keep the old legacy tokens for now

Changes to be committed:
	modified:   demo/index.html
	modified:   demo/style.scss
	modified:   package-lock.json
	modified:   package.json
	modified:   scripts/postCss.js
	deleted:    scripts/removeNonRemPlugin.js
	deleted:    src/style-fixed.css.map
	deleted:    src/style-fixed.map
	deleted:    src/style-fixed.scss
	modified:   src/style.css.map
	modified:   src/style.scss
  • Loading branch information
@fajar-apri-alaska
fajar-apri-alaska committed Nov 8, 2023
1 parent d095a61 commit ce74805
Show file tree
Hide file tree
Showing 11 changed files with 3,629 additions and 5,451 deletions.
10 changes: 6 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,15 @@
</style>
<main></main>

<script type="module">
import 'https://unpkg.com/marked@latest/marked.min.js';
import 'https://unpkg.com/prismjs@latest/prism.js';
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<script>
// import 'https://unpkg.com/marked@latest/marked.min.js';
// import 'https://unpkg.com/prismjs@latest/prism.js';
fetch('/demo/demo.md')
.then((response) => response.text())
.then((text) => {
const rawHtml = marked(text);
const rawHtml = marked.parse(text);
document.querySelector('main').innerHTML = rawHtml;
Prism.highlightAll();
});
Expand Down
63 changes: 34 additions & 29 deletions demo/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,32 @@
// ----------------------- DO NOT EDIT -----------------------------

// Import Auro tokens
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';

// Import baseline library dependencies
// Mixins
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';

// Creates baseline output in CSS
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/fonts';
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/normalize';
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/headings';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/fonts';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/normalize';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/headings';

@import './../node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/focusVisible';
$paragraph: true;
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/essentials';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials';

// Support for fallback values
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';

// Import Utility classes (will produce CSS in output)
$layout-properties: margin;
$layout-extensions: Right;
$layout-modifiers: (
'md': $auro-size-md
'md': $ds-size-200
);
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityMixins/layoutPropertiesGenerator';

// Custom styles per demo pages
body {
Expand All @@ -45,15 +50,15 @@ main {

.exampleWrapper {
$stripe: #f3f3f3;
$background: var(--auro-color-base-white);
$background: var(--ds-color-base-white, $ds-color-base-white);

background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
overflow: auto;
}

.exampleWrapper--ondark {
$stripe: var(--auro-color-background-darkest);
$background: var(--auro-color-background-darker);
$stripe: var(--ds-color-background-darkest, $ds-color-background-darkest);
$background: var(--ds-color-background-darker, $ds-color-background-darker);

background: repeating-linear-gradient( 45deg, $stripe, $stripe 10px, $background 10px, $background 20px);
}
Expand All @@ -79,18 +84,18 @@ code[class*='language-'], pre[class*='language-'] {
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

code:not(.html):not(.css):not(.js) {
color: var(--auro-color-brand-flamingo-500);
color: var(--ds-color-brand-flamingo-500, $ds-color-brand-flamingo-500);
}

blockquote {
margin-left: 0;
border-left: 1px solid var(--auro-color-border-active-on-light);
padding: var(--auro-size-xs);
padding-left: var(--auro-size-xl);
color: var(--auro-color-text-secondary-on-light);
border-left: 1px solid var(--ds-color-border-active-default, $ds-color-border-active-default);
padding: var(--ds-size-100, $ds-size-100);
padding-left: var(--ds-size-400, $ds-size-400);
color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
font-weight: 200;
margin-top: var(--auro-size-lg);
margin-bottom: var(--auro-size-lg);
margin-top: var(--ds-size-300, $ds-size-300);
margin-bottom: var(--ds-size-300, $ds-size-300);

p {
line-height: 2;
Expand All @@ -100,7 +105,7 @@ blockquote {
}

& + p {
margin-bottom: var(--auro-size-xl);
margin-bottom: var(--ds-size-400, $ds-size-400);
}
}

Expand Down Expand Up @@ -148,8 +153,8 @@ strong {

pre {
overflow: auto;
background-color: var(--auro-color-base-gray-100);
margin-bottom: var(--auro-size-xxl);
background-color: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100);
margin-bottom: var(--ds-size-600, $ds-size-600);

code {
font-size: .9rem;
Expand All @@ -161,19 +166,19 @@ table {
border-collapse: collapse;
overflow: scroll;
width: auto;
border-spacing: var(--auro-size-sm);
margin-bottom: var(--auro-size-xl);
font-weight: var(--auro-text-heading-display-weight);
border-spacing: var(--ds-size-150, $ds-size-150);
margin-bottom: var(--ds-size-400, $ds-size-400);
font-weight: var(--ds-text-heading-display-weight, $ds-text-heading-display-weight);

tr {
&:nth-child(even) {
background-color: var(--auro-color-base-gray-100);
background-color: var(--ds-color-brand-gray-100, $ds-color-brand-gray-100);
}
}

th {
text-align: left;
font-weight: var(--auro-text-heading-default-weight);
font-weight: var(--ds-text-heading-default-weight, $ds-text-heading-default-weight);
}

img {
Expand All @@ -187,10 +192,10 @@ table {
}

thead {
border-bottom: 1px solid var(--auro-color-base-gray-200);
border-bottom: 1px solid var(--ds-color-brand-gray-200, $ds-color-brand-gray-200);
border-collapse: collapse;
}

th, td {
padding: var(--auro-size-md);
padding: var(--ds-size-200, $ds-size-200);
}
Loading

0 comments on commit ce74805

Please sign in to comment.