Skip to content

Commit e3586f5

Browse files
extrabrightextrabright
committed
beta.12 changes
1 parent cd246bc commit e3586f5

File tree

18 files changed

+247
-194
lines changed

18 files changed

+247
-194
lines changed

‎cli/make.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const replace = require('replace-in-file');
55
module.exports = {
66
makeTheme(name = 'starter', dist = 'scss') {
77

8-
const sourceFolder = 'stubs/theme-starter/';
8+
const sourceFolder = 'node_modules/@webpixels/css/stubs/theme-starter/';
99
const destinationFolder = dist+'/themes/';
1010
const replaceString = 'THEME_STARTER';
1111
const themeName = name;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@webpixels/css",
33
"description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
4-
"version": "2.0.0-beta.15",
4+
"version": "2.0.0-beta.16",
55
"version_short": "2.0",
66
"license": "MIT",
77
"style": "dist/index.css",

‎script/sass-to-json.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Import the sass library
2+
const sass = require('sass');
3+
const fs = require('fs');
4+
5+
// Define the SCSS content
6+
const scssContent = `
7+
$utilities: (
8+
"align": (
9+
property: vertical-align,
10+
class: align,
11+
values: baseline top middle bottom text-bottom text-top,
12+
),
13+
"float": (
14+
responsive: true,
15+
property: float,
16+
values: (
17+
start: left,
18+
end: right,
19+
none: none,
20+
),
21+
)
22+
);
23+
`;
24+
25+
function convertToJSON() {
26+
let scssInput
27+
let jsonOutput = {};
28+
29+
// Remove leading/trailing spaces and trailing comma
30+
scssInput = scssContent.trim().replace(/,\s*$/, '');
31+
32+
// Wrap the SCSS content in a JSON object
33+
const jsonString = `{ "utilities": { ${scssInput} } }`;
34+
35+
try {
36+
jsonOutput = JSON.parse(jsonString);
37+
} catch (error) {
38+
jsonOutput = { error: "Invalid SCSS format." };
39+
}
40+
41+
// fs.writeFileSync('utilities.json', JSON.stringify(jsonOutput, null, 2););
42+
43+
return JSON.stringify(jsonOutput, null, 2);
44+
}
45+
46+
// Write the JSON to a file
47+
const output = convertToJSON()
48+
49+
fs.writeFileSync('utilities.json', output);
50+
51+
console.log('SCSS to JSON conversion complete. JSON data saved to utilities.json.');

‎scss/core/_root.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,31 @@
55
--#{$prefix}#{$color}: #{$value};
66
}
77

8+
@each $color, $value in $all-colors-rgb {
9+
--#{$prefix}#{$color}-rgb: #{$value};
10+
}
11+
812
// Fonts
913
--#{$prefix}font-display: #{inspect($font-display-bundle)};
1014
--#{$prefix}font-serif: #{inspect($font-serif-bundle)};
1115
--#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};
1216

17+
// Shadows
18+
--#{$prefix}box-shadow: #{$box-shadow};
19+
--#{$prefix}box-shadow-1: #{$box-shadow-1};
20+
--#{$prefix}box-shadow-2: #{$box-shadow-2};
21+
--#{$prefix}box-shadow-3: #{$box-shadow-3};
22+
--#{$prefix}box-shadow-4: #{$box-shadow-4};
23+
--#{$prefix}box-shadow-5: #{$box-shadow-5};
24+
--#{$prefix}box-shadow-6: #{$box-shadow-6};
25+
26+
--#{$prefix}box-soft-shadow-1: #{$box-soft-shadow-1};
27+
--#{$prefix}box-soft-shadow-2: #{$box-soft-shadow-2};
28+
--#{$prefix}box-soft-shadow-3: #{$box-soft-shadow-3};
29+
--#{$prefix}box-soft-shadow-4: #{$box-soft-shadow-4};
30+
--#{$prefix}box-soft-shadow-5: #{$box-soft-shadow-5};
31+
--#{$prefix}box-soft-shadow-6: #{$box-soft-shadow-6};
32+
1333
// Logo
1434
.logo-light {
1535
display: none;

‎scss/extra.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0-beta.15 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.0-beta.16 (https://webpixels.io/)
33
* Copyright 2023 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/

‎scss/extras/_article.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
@include font-size(1.5em);
2222
font-weight: $font-weight-bolder;
2323
margin-top: 2em;
24-
margin-bottom: 1em;
24+
margin-bottom: .5em;
2525
line-height: 1.3333333;
2626
letter-spacing: -.025em;
2727
white-space: pre-wrap;

‎scss/index.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0-beta.15 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.0-beta.16 (https://webpixels.io/)
33
* Copyright 2023 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/
@@ -19,7 +19,6 @@
1919
@import "./maps";
2020

2121
// Include remainder of required parts
22-
@import "bootstrap/scss/maps";
2322
@import "bootstrap/scss/mixins";
2423
@import "bootstrap/scss/root";
2524

‎scss/main.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Webpixels CSS v2.0.0-beta.15 (https://webpixels.io/)
2+
* Webpixels CSS v2.0.0-beta.16 (https://webpixels.io/)
33
* Copyright 2023 Webpixels
44
* Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
55
*/
@@ -19,7 +19,6 @@
1919
@import "./maps";
2020

2121
// Include remainder of required parts
22-
@import "bootstrap/scss/maps";
2322
@import "bootstrap/scss/mixins";
2423
@import "bootstrap/scss/root";
2524

‎scss/maps/_maps.scss‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ $gray-colors: (
1818
"gray-950": $gray-950
1919
) !default;
2020

21-
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
21+
$all-colors: map-merge-multiple($gray-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
22+
$all-colors-rgb: map-loop($all-colors, to-rgb, "$value") !default;
23+
24+
$utilities-all-bg-colors: map-loop($all-colors, rgba-css-var, "$key", "bg") !default;
25+
$utilities-all-border-colors: map-loop($all-colors, rgba-css-var, "$key", "border") !default;
2226

2327
// Typography
2428
$utilities-font-family-values: (
@@ -61,38 +65,34 @@ $utilities-letter-spacing-values: (
6165
// Shadows
6266
$utilities-shadows: (
6367
null: $box-shadow,
64-
1: $box-shadow-sm,
65-
2: $box-shadow-lg,
66-
3: $box-shadow-xl,
67-
4: $box-shadow-2xl,
68-
5: $box-shadow-3xl,
69-
6: $box-shadow-4xl,
68+
1: $box-shadow-1,
69+
2: $box-shadow-2,
70+
3: $box-shadow-3,
71+
4: $box-shadow-4,
72+
5: $box-shadow-5,
73+
6: $box-shadow-6,
7074
inset: $box-shadow-inset,
71-
outline: $box-shadow-outline,
72-
focus: $box-shadow-focus,
7375
none: none
7476
) !default;
7577

7678
$utilities-soft-shadows: (
77-
1: $box-soft-shadow-sm,
78-
2: $box-soft-shadow-lg,
79-
3: $box-soft-shadow-xl,
80-
4: $box-soft-shadow-2xl,
81-
5: $box-soft-shadow-3xl,
82-
6: $box-soft-shadow-4xl,
83-
none: none
79+
1: $box-soft-shadow-1,
80+
2: $box-soft-shadow-2,
81+
3: $box-soft-shadow-3,
82+
4: $box-soft-shadow-4,
83+
5: $box-soft-shadow-5,
84+
6: $box-soft-shadow-6,
8485
) !default;
8586

8687
// Border radius
8788
$utilities-border-radius: (
8889
null: $border-radius,
8990
0: 0,
9091
1: $border-radius-sm,
91-
2: $border-radius-lg,
92-
3: $border-radius-xl,
93-
4: $border-radius-2xl,
94-
5: $border-radius-3xl,
95-
6: $border-radius-4xl,
92+
2: $border-radius,
93+
3: $border-radius-lg,
94+
4: $border-radius-xl,
95+
5: $border-radius-xxl,
9696
pill: $border-radius-pill,
9797
circle: $border-radius-circle,
9898
card: $card-border-radius

‎scss/utilities/_animation.scss‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,45 @@
33
//
44

55
@keyframes ping {
6-
75%, 100% {
7-
transform: scale(2);
8-
opacity: 0;
9-
}
6+
75%, 100% {
7+
transform: scale(2);
8+
opacity: 0;
9+
}
1010
}
1111

1212
@keyframes pulse {
13-
50% {
14-
opacity: .5;
15-
}
13+
50% {
14+
opacity: .5;
15+
}
1616
}
1717

1818
@keyframes bounce {
19-
0%, 100% {
20-
transform: translateY(-25%);
21-
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
22-
}
19+
0%, 100% {
20+
transform: translateY(-25%);
21+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
22+
}
2323

24-
50% {
25-
transform: none;
26-
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
27-
}
24+
50% {
25+
transform: none;
26+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
27+
}
2828
}
2929

3030
@keyframes slideLeft {
31-
0% {
32-
transform:translateX(0);
33-
}
34-
to {
35-
transform:translateX(-100%);
36-
}
31+
0% {
32+
transform:translateX(0);
33+
}
34+
to {
35+
transform:translateX(-100%);
36+
}
3737
}
3838

3939
@keyframes slideRight {
40-
0% {
41-
transform:translateX(-100%);
42-
}
40+
0% {
41+
transform:translateX(-100%);
42+
}
4343

44-
to {
45-
transform:translateX(0);
46-
}
44+
to {
45+
transform:translateX(0);
46+
}
4747
}

0 commit comments

Comments
 (0)