Update latest template

master-co · Jun 20, 2024 · d374d90 · d374d90
1 parent 1eebcce
commit d374d90
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 42 deletions.
diff --git a/site/.env b/site/.env
@@ -1,2 +1,2 @@
 NEXT_PUBLIC_PROJECT=Master CSS
-NEXT_PUBLIC_VERSION=2.0.0-rc.41
+NEXT_PUBLIC_VERSION=2.0.0-rc.43
diff --git a/site/app/[locale]/play/templates/latest/config.js b/site/app/[locale]/play/templates/latest/config.js
@@ -1,35 +1,11 @@
 /** @type {import('@master/css').Config} */
 export default {
-    styles: {
-        btn: 'inline-flex center-content px:6x h:48 r:1x bg:primary fg:primary-invert font:14 font:semibold text:center'
-    },
     variables: {
         text: {
             primary: {
-                invert: {
-                    '@light': '$(yellow-90)',
-                    '@dark': '$(yellow-95)'
-                }
+                '@light': '$(yellow-50)',
+                '@dark': '$(amber-20)'
             }
-        },
-        accent: {
-            '@light': '$(yellow-50)',
-            '@dark': '$(amber-20)'
-        },
-        primary: {
-            '@light': '$(yellow-40)',
-            '@dark': '$(yellow-50)'
-        },
-        panel: {
-            '@light': '$(white)',
-            '@dark': '$(gray-80)'
-        },
-        ring: {
-            '@light': '$(slate-40)/.1',
-            '@dark': '$(white)/.1'
-        },
-        'box-shadow': {
-            '01': '0|2|4|black/.12,0|4|8|black/.08,0|20|30|black/.1'
         }
     }
 }
diff --git a/site/app/[locale]/play/templates/latest/example.html b/site/app/[locale]/play/templates/latest/example.html
@@ -1,17 +1,17 @@
-<div class="min-vh p:6x flex center-content">
+<div class="center-content flex min-vh p:6x">
     <div
-         class="max-w:520 shadow:01 outline:1|ring bg:panel m:auto r:3x fg:neutral text:16_:where(p,li) mt:1.5em_:where(p,ul) my:.75em_:where(li)">
+         class="bg:gray-80@dark bg:white@light fg:neutral m:auto max-w:520 mt:1.5em_:where(p,ul) my:.75em_:where(li) outline:1|lightest r:3x shadow:0|2|4|black/.12,0|4|8|black/.08,0|20|30|black/.1 text:16_:where(p,li)">
         <div class="p:12x|12x|6x|12x">
-            <img class="mx:auto mb:10x hidden block@light" src="/images/[email protected]"
+            <img class="block@light hidden mb:10x mx:auto" src="/images/[email protected]"
                  alt="Master CSS Play" width="200" />
-            <img class="mx:auto mb:10x hidden block@dark" src="/images/[email protected]"
+            <img class="block@dark hidden mb:10x mx:auto" src="/images/[email protected]"
                  alt="Master CSS Play"
                  width="200" />
-            <p class="fg:neutural">A real-time code editor for Master CSS, including:</p>
+            <p>A real-time code editor for Master CSS, including:</p>
             <ul>
                 <li class="flex fg:strong font:medium">
                     <svg xmlns="http://www.w3.org/2000/svg"
-                         class="mr:3x flex:0|0|auto stroke:accent fill:accent/.2" width="26" height="26"
+                         class="fill:text-primary/.2 flex:0|0|auto mr:3x stroke:text-primary" width="26" height="26"
                          viewBox="0 0 24 24" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                         <path
@@ -22,7 +22,7 @@
                 </li>
                 <li class="flex fg:strong font:medium">
                     <svg xmlns="http://www.w3.org/2000/svg"
-                         class="mr:3x flex:0|0|auto stroke:accent fill:accent/.2" width="26" height="26"
+                         class="fill:text-primary/.2 flex:0|0|auto mr:3x stroke:text-primary" width="26" height="26"
                          viewBox="0 0 24 24" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                         <path
@@ -33,7 +33,7 @@
                 </li>
                 <li class="flex fg:strong font:medium">
                     <svg xmlns="http://www.w3.org/2000/svg"
-                         class="mr:3x flex:0|0|auto stroke:accent fill:accent/.2" width="26" height="26"
+                         class="fill:text-primary/.2 flex:0|0|auto mr:3x stroke:text-primary" width="26" height="26"
                          viewBox="0 0 24 24" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                         <path
@@ -44,7 +44,7 @@
                 </li>
                 <li class="flex fg:strong font:medium">
                     <svg xmlns="http://www.w3.org/2000/svg"
-                         class="mr:3x flex:0|0|auto stroke:accent fill:accent/.2" width="26" height="26"
+                         class="fill:text-primary/.2 flex:0|0|auto mr:3x stroke:text-primary" width="26" height="26"
                          viewBox="0 0 24 24" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                         <path
@@ -54,18 +54,17 @@
                     Sharing your masterpiece.
                 </li>
             </ul>
-            <p class="fg:neutural">Here you can quickly create demos, ideas, prototypes, and even for learning.</p>
+            <p>Here you can quickly create demos, ideas, prototypes, and even for learning.</p>
         </div>
-        <div class="p:6x|12x|12x|12x bt:1|dotted|divider">
-            <p class="text:12 italic mt:0">Don't know how to use Master CSS syntax yet?</p>
-            <a class="btn w:full mt:5x rel" href="https://rc.css.master.co/guide/style-declarations" target="_blank"
-               rel="noreferrer noopener">
+        <div class="bt:1|dotted|light p:6x|12x|12x|12x">
+            <p class="italic mt:0 text:12">Don't know how to use Master CSS syntax yet?</p>
+            <a class="center-content inline-flex rel b:1|yellow-active bg:yellow fg:yellow-text font:14 font:semibold h:48 mt:5x px:6x r:1x text:center w:full" href="#">
                 Learn syntax
                 <svg class="abs right:4x" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                      stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                     <path
-                          class="~ease|.1s opacity:0 scale(0) .btn:hover_{opacity:1;scale(1)} transform-origin:5x|center"
+                          class=".btn:hover_{opacity:1;scale(1)} ~ease|.1s opacity:0 scale(0) transform-origin:5x|center"
                           d="M5 12l14 0"></path>
                     <path d="M13 18l6 -6"></path>
                     <path d="M13 6l6 6"></path>