cleanup

Author: JesmoDev

packages/uui-css/lib/custom-properties.css

@@ -3,12 +3,6 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 */
 
 @import './custom-properties/sizes.css';
-@import './custom-properties/colors.css';
-/* @import './custom-properties/palette.css'; */
 @import './custom-properties/shadow.css';
-
-/* @import './custom-properties/interface.css'; */
-/* @import './custom-properties/interface-look.css'; */
-/* TODO implement themes */
-/* @import './custom-properties/themes/darkmode.css';
-@import './custom-properties/themes/highcontrast.css'; */
+@import './custom-properties/palette.css';
+@import './custom-properties/colors.css';

packages/uui-css/lib/custom-properties.story.ts

@@ -85,96 +85,6 @@ const propertySizeTemplate = (property: any) => html` <uui-table-row>
   </uui-table-cell>
 </uui-table-row>`;
 
-export const Looks = () => html` <h2>Looks</h2>
-  <p>
-    These are used to overwrite selected interface properties to get a specific
-    look.
-  </p>
-
-  <h3>Primary Look</h3>
-  <uui-table @click=${copyToClipboard}>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-primary'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>
-
-  <h3>Secondary Look</h3>
-  <uui-table>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-secondary'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>
-
-  <h3>Positive Look</h3>
-  <uui-table>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-positive'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>
-
-  <h3>Warning Look</h3>
-  <uui-table>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-warning'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>
-
-  <h3>Danger Look</h3>
-  <uui-table>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-danger'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>
-
-  <h3>Placeholder Look</h3>
-  <uui-table>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-placeholder'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>
-
-  <h3>OutLine Look</h3>
-  <uui-table>
-    <uui-table-head>
-      <uui-table-head-cell>Custom property name</uui-table-head-cell>
-      <uui-table-head-cell>Value</uui-table-head-cell>
-      <uui-table-head-cell>Example</uui-table-head-cell>
-    </uui-table-head>
-    ${properties
-      .filter(property => property.key.includes('look-outline'))
-      .map(property => propertyColorTemplate(property))}
-  </uui-table>`;
-
 export const InterfaceColors = () => html`
   <p>
     THe UI Library components use predefined custom properties.If you want your
@@ -189,12 +99,12 @@ export const InterfaceColors = () => html`
       <uui-table-head-cell>Example</uui-table-head-cell>
     </uui-table-head>
     ${properties
-      .filter(property => property.key.includes('interface'))
+      .filter(property => property.key.includes('color'))
       .map(property => propertyColorTemplate(property))}
   </uui-table>
 `;
 
-export const BrandColors = () => html`<h2>Colors</h2>
+export const BrandPalette = () => html`<h2>Colors</h2>
   <p>
     We provide all the Umbraco Identity colors as css custom properties, but we
     do not recommend using those directly. All interface should be based on
@@ -208,7 +118,7 @@ export const BrandColors = () => html`<h2>Colors</h2>
       <uui-table-head-cell>Example</uui-table-head-cell>
     </uui-table-head>
     ${properties
-      .filter(property => property.key.includes('color'))
+      .filter(property => property.key.includes('palette'))
       .map(property => propertyColorTemplate(property))}
   </uui-table>`;